/* =====================================================================
   KASHUP V4.0 — YELLOW GOLD ELITE EDITION
   Direction: premium cream-and-white fintech — white surfaces,
   #F2B705 → #FFC92A balance gradients, bold typography and rounded cards.
   One system across every page. All class names preserved.
   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --hairline: rgba(46, 36, 0, .07);
  --hairline-soft: rgba(46, 36, 0, .04);
  --ink: #1D1B15;
  --ink-soft: #57503C;
  --ink-faint: #9A9481;
  --violet: #F5A800;
  --violet-deep: #C98700;
  --indigo: #232355;
  --cyan: #0FB5D6;
  --coral: #F2B705;
  --gold: #FFB930;
  --ok: #0FA968;
  --red: #C98700;
  --blue: #3E7BFA;
  --pink: #D99B00;
  --grad: linear-gradient(180deg, #FFD14D, #EFA300);
  --grad-deep: linear-gradient(160deg, #F7BC2F, #D18E00);
  --aurora: radial-gradient(420px 260px at 85% -10%, rgba(255, 246, 214, .7), transparent 60%),
            radial-gradient(380px 300px at 5% 112%, rgba(120, 80, 0, .26), transparent 66%),
            linear-gradient(140deg, #F7C331 0%, #F0A500 52%, #DE9400 100%);
  --ring: 0 0 0 4px rgba(245, 168, 0, .16);
  --e1: 0 2px 12px -6px rgba(46, 36, 0, .13);
  --e2: 0 8px 22px -8px rgba(46, 36, 0, .16);
  --e3: 0 20px 46px -16px rgba(60, 45, 0, .32);
  --e-brand: 0 12px 28px -8px rgba(201, 135, 0, .45);
  --r-xs: 10px; --r-sm: 16px; --r-md: 20px; --r-lg: 26px; --r-hero: 30px;
  --f: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- 2. reset & base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f);
  background:
    radial-gradient(760px 380px at 50% -180px, rgba(245, 200, 80, .14), transparent 70%),
    var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  display: flex; flex-direction: column;
  font-size: 15px; line-height: 1.45; letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
::selection { background: rgba(245, 168, 0, .22); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #E5DCC2; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 3. icons ---------- */
.ic { width: 21px; height: 21px; flex: 0 0 auto; }
.ic-xs { width: 13px; height: 13px; }
.ic-sm { width: 16px; height: 16px; }
.ic-lg { width: 26px; height: 26px; }
.ic-xl { width: 44px; height: 44px; }

/* ---------- 4. brand ---------- */
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo-mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: var(--grad-deep); color: #241B00; font-weight: 800; font-size: 18px;
  box-shadow: var(--e-brand); letter-spacing: 0;
}
.logo-word { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.logo-word span { color: var(--violet); }
.brand-block { display: inline-flex; flex-direction: column; gap: 0; align-items: flex-start; }
.brand-sub { font-size: 9px; font-weight: 600; color: var(--ink-faint); letter-spacing: .07em; margin-top: -1px; }
.logo-bare { gap: 8px; align-items: center; }
.logo-bare-k {
  font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  background: linear-gradient(165deg, #FFC531 15%, #8A5E00 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.logo-word-alt { font-size: 20px; color: var(--ink); }
.logo-word-alt b { font-weight: 800; color: var(--violet); }
.brand-sub-green { color: #A97B00; }

/* ---------- 5. shell & header ---------- */
.app-shell { max-width: 660px; margin: 0 auto; padding: 0 16px 12px; flex: 1 0 auto; width: 100%; }
body.page-wide .app-shell { max-width: 760px; }
body.page-home .app-shell { max-width: 480px; padding-left: 14px; padding-right: 14px; }
.page { padding-top: 2px; display: flex; flex-direction: column; gap: 10px; }

.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 -16px; padding: 0 16px; padding-top: env(safe-area-inset-top);
  height: calc(50px + env(safe-area-inset-top));
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.5) blur(14px);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent;
}
body.page-home .topbar { margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; }
.topbar-title { font-size: 14.5px; font-weight: 700; text-align: center; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.topbar-btn {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 13px; color: var(--ink-soft); background: transparent; border: 1px solid transparent;
  transition: .18s;
}
.topbar-btn:active { transform: scale(.9); background: rgba(245, 168, 0, .12); }
.topbar-btn.ghost { visibility: hidden; }
.topbar-btn.has-badge { position: relative; }
.topbar-btn .dot {
  position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--coral); color: #fff; font-size: 9.5px; font-weight: 700; font-style: normal;
  border: 2px solid var(--card);
}
body.page-home .topbar-actions .topbar-btn {
  background: var(--card); border-color: var(--hairline-soft); box-shadow: var(--e1);
}
body.page-home .topbar-actions .avatar {
  background: var(--grad-deep); border: 0; color: #241B00; box-shadow: var(--e-brand);
}
#themeToggle .ic-moon { display: none; }
html[data-theme="dark"] #themeToggle .ic-sun { display: none; }
html[data-theme="dark"] #themeToggle .ic-moon { display: block; }

/* ---------- 6. avatars ---------- */
.avatar {
  display: grid; place-items: center; border-radius: 50%; font-weight: 800;
  background: var(--grad-deep); color: #241B00; border: 2px solid rgba(255, 255, 255, .9); flex: 0 0 auto;
}
.avatar-sm { width: 34px; height: 34px; font-size: 13px; }
.avatar-md { width: 46px; height: 46px; font-size: 16px; }
.avatar-lg { width: 84px; height: 84px; font-size: 28px; border-width: 3px; border-color: rgba(245, 168, 0, .3); box-shadow: 0 0 0 5px rgba(245, 168, 0, .08); }
.avatar-xl { width: 104px; height: 104px; font-size: 34px; border-width: 3px; border-color: rgba(245, 168, 0, .3); box-shadow: 0 0 0 6px rgba(245, 168, 0, .07); }

/* ---------- 7. cards & sections ---------- */
.card {
  background: var(--card);
  border: 0;
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--e1);
}
.card.flush { padding: 2px 0; overflow: hidden; }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sec-head h2 { font-size: 16px; font-weight: 700; color: var(--ink); }
.sec-head h2 small { font-size: 11.5px; color: var(--ink-faint); font-weight: 500; display: block; margin-top: 1px; }
.link { color: var(--violet); font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.link:hover { text-decoration: underline; }
.empty { text-align: center; padding: 36px 16px; color: var(--ink-faint); }
.empty .ic-xl { color: #D8D2BC; margin: 0 auto 12px; }
.empty p { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.empty small { font-size: 12px; display: block; margin-top: 4px; }

/* ---------- 8. buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px; border-radius: 14px;
  font-size: 14.5px; font-weight: 700; border: 1px solid transparent;
  transition: transform .16s, box-shadow .16s, filter .16s; user-select: none; text-align: center;
}
.btn:active { transform: scale(.975); }
.btn-primary {
  background: var(--grad); color: #241B00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--e-brand);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-secondary { background: var(--card); border-color: var(--hairline); color: var(--ink); box-shadow: var(--e1); }
.btn-secondary:hover { border-color: rgba(245, 168, 0, .4); }
.btn-ghost { background: transparent; color: var(--violet); }
.btn-danger { background: rgba(201, 135, 0, .08); border-color: rgba(201, 135, 0, .35); color: #8A5E00; }
.btn-gold { background: linear-gradient(180deg, #FFCE5C, #F5A423); color: #2A1800; box-shadow: 0 10px 26px -10px rgba(245, 164, 35, .55); }
.btn-white { background: #FFFFFF; color: var(--violet-deep); font-weight: 800; border-color: rgba(245, 168, 0, .3); }
.btn-block { width: 100%; }
.btn-sm { min-height: 36px; padding: 7px 14px; font-size: 12.5px; border-radius: 11px; }
.btn:disabled { opacity: .55; pointer-events: none; }
.icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--hairline); color: var(--ink-soft);
  box-shadow: var(--e1); transition: .18s;
}
.icon-btn:active { transform: scale(.92); }

/* ---------- 9. pills & tones ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.pill-ok     { background: #DDF6E9; color: #0B7A48; }
.pill-warn   { background: rgba(255, 185, 48, .16); color: #9A6400; }
.pill-bad    { background: rgba(201, 135, 0, .1); color: #8A5E00; }
.pill-blue   { background: rgba(62, 123, 250, .12); color: #2560EB; }
.pill-muted  { background: #F6F3EA; color: #8A8574; }
.pill-gold   { background: rgba(255, 185, 48, .18); color: #92600A; }
.pill-green  { background: #DDF6E9; color: #0B7A48; }
.pill-violet { background: rgba(245, 168, 0, .12); color: #9A6400; }

.row-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; }
/* vivid brand circles with white icons — task list reference style */
.tone-ok     { background: linear-gradient(180deg, #2BCF82, #0D9A58); color: #FFFFFF; }
.tone-blue   { background: linear-gradient(180deg, #4D9BFF, #2E6FE8); color: #FFFFFF; }
.tone-warn   { background: linear-gradient(180deg, #FFC55C, #F0961C); color: #FFFFFF; }
.tone-red    { background: linear-gradient(180deg, #FFD14D, #D18E00); color: #FFFFFF; }
.tone-violet { background: linear-gradient(180deg, #FFD34D, #E8A200); color: #241B00; }
.tone-cyan   { background: linear-gradient(180deg, #2BC9E4, #0D93B0); color: #FFFFFF; }
.tone-gold   { background: linear-gradient(180deg, #FFCE5C, #F0A023); color: #FFFFFF; }
.tone-green  { background: linear-gradient(180deg, #2BCF82, #0D9A58); color: #FFFFFF; }
.tone-muted  { background: #F6F3EA; color: #8A8574; }
.tone-bad    { background: linear-gradient(180deg, #FFD14D, #D18E00); color: #FFFFFF; }

/* ---------- 10. list rows ---------- */
.row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--hairline-soft); transition: background .15s; }
.row:last-child { border-bottom: none; }
.row:active { background: rgba(245, 168, 0, .05); }
.row-ic { box-shadow: var(--e1); }
.row-main { flex: 1; min-width: 0; }
.row-title { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
.row-end { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.mrow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--hairline-soft); transition: background .15s; }
.mrow:last-child { border-bottom: none; }
.mrow:active { background: rgba(245, 168, 0, .05); }
.mrow b { font-size: 13.5px; }
.mrow small { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }
.mrow-chev { color: var(--ink-faint); display: inline-flex; }
.amt-plus { color: var(--ok); font-weight: 800; font-size: 13px; }
.amt-minus { color: #8A5E00; font-weight: 800; font-size: 13px; }

/* ---------- 11. forms ---------- */
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.field label small { color: var(--ink-faint); font-weight: 500; }
.inp {
  width: 100%; min-height: 50px; padding: 13px 14px; border-radius: var(--r-sm);
  background: #FFFFFF; border: 1px solid var(--hairline); color: var(--ink);
  font-size: 15px; transition: border-color .18s, box-shadow .18s; outline: none;
}
.inp::placeholder { color: #B8B09A; }
.inp:focus { border-color: var(--violet); box-shadow: var(--ring); }
textarea.inp { min-height: 108px; resize: vertical; line-height: 1.5; }
select.inp { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.inp-prefix { position: relative; }
.inp-prefix .prefix { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-size: 14px; font-weight: 600; }
.inp-prefix .inp { padding-left: 44px; }
.hint { font-size: 11.5px; color: var(--ink-faint); line-height: 1.5; margin-top: 5px; }
.hint.err { color: #8A5E00; font-weight: 600; }
.form-gap { display: flex; flex-direction: column; gap: 15px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--hairline); color: var(--ink-soft);
  font-size: 12.5px; font-weight: 600; transition: .16s;
}
.chip:active { transform: scale(.95); border-color: var(--violet); color: var(--violet); }
.chip.active { background: var(--grad); border-color: transparent; color: #241B00; box-shadow: var(--e-brand); }
.copy-row { display: flex; align-items: center; gap: 9px; background: var(--bg); border: 1px dashed #E3DCC4; border-radius: var(--r-sm); padding: 10px 12px; }
.copy-row code { font-size: 12.5px; color: var(--violet-deep); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* switch toggle */
.switch { position: relative; display: inline-block; width: 46px; height: 27px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: #E5DCC2; transition: .2s; }
.switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: .2s; }
.switch input:checked + i { background: var(--grad); }
.switch input:checked + i::after { transform: translateX(19px); }

/* ---------- 12. tabs ---------- */
.tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -ms-overflow-style: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; padding: 8px 16px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--hairline);
  color: var(--ink-soft); font-size: 12.5px; font-weight: 700; white-space: nowrap; transition: .16s;
}
.tab.active { background: var(--grad); border-color: transparent; color: #241B00; box-shadow: var(--e-brand); }
.tabpanes > div[hidden] { display: none; }

/* segmented dashboard tabs */
.seg-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; overflow: hidden;
  background: var(--card); border: 1px solid var(--hairline-soft);
  border-radius: 999px; padding: 5px; margin-top: 2px; box-shadow: var(--e2);
}
.seg-tab {
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
  min-height: 50px; padding: 6px 2px; border-radius: 999px; border: 0;
  background: transparent; color: var(--ink-soft);
  font-size: 11.5px; font-weight: 600; line-height: 1.1; white-space: nowrap; transition: .18s;
}
.seg-tab .ic { width: 16px; height: 16px; }
.seg-tab.active {
  background: var(--grad); color: #241B00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--e-brand);
}
.seg-tab:active { transform: scale(.96); }

/* ---------- 13. hero wallet card ---------- */
.hero-wallet {
  position: relative; overflow: hidden;
  background: var(--aurora);
  border: 1px solid rgba(122, 82, 0, .5);
  border-radius: var(--r-hero);
  padding: 16px 16px 14px;
  color: #241B00;
  box-shadow: var(--e3), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.hero-wallet::after {
  content: ''; position: absolute; right: -46px; top: -46px; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255, 248, 220, .5), transparent 62%);
  border-radius: 50%; pointer-events: none;
}
.hw-label { font-size: 12px; color: #3D2F00; font-weight: 600; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
.hw-amount { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; color: #241B00; }
.hw-amount .eye-btn { background: rgba(255, 255, 255, .14); border: none; color: #3D2F00; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; }
.eye-btn { background: rgba(255, 255, 255, .14); border: none; color: inherit; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; }
.eye-btn:active { transform: scale(.9); }
.hw-sub { font-size: 11.5px; color: #6E5715; }
.hw-walletid {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 3px; padding: 0;
  background: transparent; border: none; color: #241B00; font-size: 12px; font-weight: 500; cursor: pointer;
}
.hw-walletid b { font-weight: 700; letter-spacing: .04em; }
.hw-walletid .ic { opacity: .8; }
.hw-walletid:active { opacity: .7; }
.hw-actions { display: flex; gap: 10px; margin-top: 10px; position: relative; z-index: 1; }
.hw-actions .btn { flex: 1; min-height: 40px; font-size: 13px; border-radius: 999px; padding: 8px 8px; }
.btn-fund { background: #FFFFFF; color: var(--violet-deep); font-weight: 700; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .4); }
.fund-plus {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--grad); color: #241B00; margin-right: 3px; vertical-align: -6px; font-style: normal;
  box-shadow: var(--e-brand);
}
.fund-plus .ic { width: 12px; height: 12px; }
.btn-withdraw { background: rgba(255, 255, 255, .28); border: 1.5px solid rgba(36, 27, 0, .7); color: #241B00; font-weight: 700; backdrop-filter: blur(6px); }
.hw-float { position: absolute; right: 12px; top: 12px; color: rgba(43, 32, 0, .35); z-index: 0; }
.hw-float .ic { width: 42px; height: 42px; }
.hw-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(36, 27, 0, .16);
  position: relative; z-index: 1;
}
.hw-stat { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.badge-ic {
  width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .45); color: #7A5200; border: 1px solid rgba(122, 82, 0, .3);
}
.badge-ic .ic { width: 15px; height: 15px; }
.hw-stat b { font-size: 12.5px; font-weight: 800; }
.hw-stat small { font-size: 9.5px; color: rgba(43, 32, 0, .72); letter-spacing: .02em; }

/* ---------- 14. stat tiles ---------- */
.wallet-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.wstat {
  background: var(--card); border: 1px solid var(--hairline-soft); border-radius: var(--r-sm);
  padding: 12px 8px; text-align: center; transition: .18s; box-shadow: var(--e1);
}
.wstat:active { transform: scale(.96); }
.wstat .qa-ic { width: 32px; height: 32px; margin: 0 auto 6px; }
.wstat b { display: block; font-size: 13px; font-weight: 800; }
.wstat small { font-size: 10.5px; color: var(--ink-faint); }
.stat-tile { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); padding: 11px 12px; box-shadow: var(--e1); }
.stat-tile b { font-size: 14px; display: block; }
.stat-tile small { font-size: 10.5px; color: var(--ink-faint); }
.dash-stats { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--card); border: 1px solid var(--hairline-soft); border-radius: var(--r-md); padding: 11px 6px; box-shadow: var(--e1); }
.ds-item { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; border-right: 1px solid var(--hairline-soft); padding: 1px 4px; }
.ds-item:last-child { border-right: none; }
.ds-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #FFF3D1; color: var(--violet); margin-bottom: 3px; }
.ds-ic .ic { width: 16px; height: 16px; }
.ds-item b { font-size: 16px; font-weight: 700; color: var(--ink); }
.ds-item small { font-size: 11px; color: var(--ink-faint); font-weight: 500; display: inline-flex; align-items: center; gap: 2px; }
.more-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.more-stat { background: var(--card); border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); padding: 13px 8px; text-align: center; box-shadow: var(--e1); }
.more-stat b { font-size: 13px; }
.more-stat small { font-size: 10px; color: var(--ink-faint); }

/* ---------- 15. promo ---------- */
.promo {
  position: relative; overflow: hidden;
  background:
    radial-gradient(300px 200px at 90% 90%, rgba(255, 214, 110, .35), transparent 60%),
    linear-gradient(115deg, #191405 0%, #33270A 45%, #8A5E00 100%);
  border-radius: var(--r-lg);
  padding: 14px; color: #FFFFFF; box-shadow: var(--e3);
}
.promo-head { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: #FFFFFF; }
.promo-head b { color: var(--gold); }
.promo-earn { margin: 5px 0 0; position: relative; z-index: 1; }
.promo-earn small { display: block; font-size: 11px; color: rgba(43, 32, 0, .85); font-weight: 600; }
.promo-earn .big { font-size: 28px; font-weight: 800; color: var(--gold); text-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.promo-sub { display: block; font-size: 11px; color: rgba(255, 255, 255, .92); max-width: 28ch; margin-top: 3px; }
.promo .btn-outline-light {
  background: rgba(255, 255, 255, .13); border: 1.5px solid #FFFFFF; color: #FFFFFF;
  border-radius: 999px; position: relative; z-index: 1; margin-top: 8px; min-height: 34px; font-size: 12.5px; padding: 7px 14px;
}
.promo-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); color: #fff; font-size: 11px; font-weight: 700; }
.promo-ill { position: absolute; right: -2px; bottom: 8px; color: rgba(255, 255, 255, .14); }
.promo-ill .ic { width: 84px; height: 84px; }

/* ---------- 16. services grid ---------- */
.services { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.service { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 3px 0; position: relative; }
.service-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #FFF3D1; color: var(--violet); transition: transform .16s; }
.service-ic .ic { width: 20px; height: 20px; }
.service:active .service-ic { transform: scale(.9); }
.service span { font-size: 10px; font-weight: 600; color: var(--ink-soft); text-align: center; line-height: 1.2; }
.service .new { position: absolute; top: -2px; right: 6px; min-width: 8px; height: 8px; border-radius: 4px; background: var(--coral); border: 2px solid var(--card); }

/* ---------- 17. DASHBOARD: balance card + services + banner + tiles + strip ---------- */
.balance-card {
  position: relative; overflow: hidden;
  background: var(--aurora);
  border: 1px solid rgba(122, 82, 0, .55);
  border-radius: var(--r-hero);
  min-height: 0;
  padding: 14px 16px 12px;
  display: flex; flex-direction: column;
  color: #241B00;
  box-shadow: var(--e3), inset 0 1px 0 rgba(255, 255, 255, .55);
}
/* Soft diagonal shine for a premium gold finish */
.balance-card::after {
  content: ''; position: absolute; top: -60%; bottom: -60%; left: -18%; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: rotate(14deg); pointer-events: none;
}
.balance-card::before {
  content: 'K'; position: absolute; right: 4px; top: -22px;
  font-size: 148px; font-weight: 800; line-height: 1;
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 224, 130, .03));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  pointer-events: none;
}
.bc-label { display: flex; align-items: center; gap: 8px; position: relative; z-index: 1; font-size: 12px; color: #3D2F00; font-weight: 600; }
.bc-amount { position: relative; z-index: 1; font-size: clamp(28px, 9vw, 36px); font-weight: 800; letter-spacing: -.02em; margin-top: 2px; line-height: 1.1; color: #241B00; }
.bc-sub { position: relative; z-index: 1; font-size: 12.5px; margin-top: 3px; color: rgba(43, 32, 0, .88); }
.bc-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 10px; position: relative; z-index: 1; }
.bc-actions a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; border-radius: 999px; font-size: 13px; font-weight: 700; transition: transform .16s;
}
.bc-btn-solid { background: #FFFFFF; color: var(--violet-deep); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .4); }
.bc-plus { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--grad); color: #241B00; margin-right: 2px; font-style: normal; box-shadow: var(--e-brand); }
.bc-plus .ic { width: 12px; height: 12px; }
.bc-btn-outline { background: rgba(255, 255, 255, .28); border: 1.5px solid rgba(36, 27, 0, .7); color: #241B00; backdrop-filter: blur(6px); }
.bc-actions a:active { transform: scale(.97); }
.bc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(36, 27, 0, .16); position: relative; z-index: 1; }
.bc-week small { display: block; font-size: 10.5px; color: rgba(43, 32, 0, .75); font-weight: 600; }
.bc-week b { font-size: 15px; font-weight: 800; }
.bc-currency {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: rgba(94, 66, 0, .38); border: 1px solid rgba(255, 224, 130, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  font-size: 11.5px; font-weight: 700; color: #3D2F00;
}
.bc-currency i { font-style: normal; font-size: 13px; line-height: 1; }
.bc-caret { font-size: 9px; font-weight: 700; margin-left: 1px; }

/* dashboard services row — vivid brand-colored circles */
.svc-card { padding: 15px 10px 13px; }
.svc-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.svc { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 3px 0; }
.svc-ic {
  width: clamp(36px, 8.4vw, 48px); height: clamp(36px, 8.4vw, 48px); border-radius: 50%;
  display: grid; place-items: center; color: #FFFFFF;
  border: 2px solid #FFFFFF; box-shadow: var(--e2); transition: transform .16s;
}
.svc-ic .ic { width: 45%; height: 45%; }
.svc:active .svc-ic { transform: scale(.9); }
.svc-green  { background: linear-gradient(160deg, #23C464, #0B9A4C); }
.svc-blue   { background: linear-gradient(160deg, #4D9BFF, #2E6FE8); }
.svc-gold   { background: linear-gradient(160deg, #FFCE5C, #F5A423); }
.svc-pink   { background: linear-gradient(160deg, #FFD14D, #D18E00); }
.svc-row .svc + .svc { border-left: 1px solid var(--hairline-soft); }
.svc span { font-size: 9.5px; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.25; white-space: nowrap; }

/* community banner */
.community-banner {
  display: flex; align-items: center; gap: 11px;
  background:
    radial-gradient(220px 130px at 92% -20%, rgba(255, 255, 255, .22), transparent 65%),
    linear-gradient(120deg, #F5A800, #D18E00 78%);
  border-radius: var(--r-md); padding: 13px 14px; box-shadow: var(--e-brand);
}
.cb-ic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, .4); border: 1px solid rgba(36, 27, 0, .25); color: #241B00; flex: 0 0 auto; }
.cb-ic .ic { width: 19px; height: 19px; }
.community-banner b { display: block; font-size: 13px; color: #241B00; line-height: 1.3; }
.community-banner small { display: block; font-size: 10.5px; color: rgba(43, 32, 0, .9); margin-top: 1px; }
.cb-links { display: inline-flex; gap: 0; flex: 0 0 auto; }
.cb-dot { width: clamp(30px, 7.4vw, 38px); height: clamp(30px, 7.4vw, 38px); border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; border: 2px solid #FFFFFF; box-shadow: var(--e1); transition: transform .16s; }
.cb-dot:active { transform: scale(.9); }
.cb-dot svg { width: 16px; height: 16px; }
.cb-wa { background: #FFFFFF; color: #18A34A; }
.cb-tg { background: #2487C9; margin-left: -7px; }
.cb-chev { flex: 0 0 auto; color: #241B00; font-size: 26px; font-weight: 700; line-height: 1; }

/* quick action tiles */
.qa6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.qa6-item {
  display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;
  min-height: 108px; padding: 12px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--hairline-soft); box-shadow: var(--e1);
  transition: transform .16s, box-shadow .16s;
}
.qa6-item:active { transform: scale(.97); }
.qa6-top { display: flex; align-items: flex-start; justify-content: space-between; }
.qa6-ic { width: clamp(38px, 9vw, 44px); height: clamp(38px, 9vw, 44px); border-radius: 13px; display: grid; place-items: center; color: #fff; box-shadow: var(--e2); }
.qa6-ic .ic { width: 20px; height: 20px; }
.qa6-chev { font-style: normal; font-size: 15px; font-weight: 700; color: #9A9481; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; }
.qa6-item span.qa6-label { font-size: 11.5px; font-weight: 700; color: var(--ink); text-align: left; line-height: 1.25; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sq-green  { background: linear-gradient(180deg, #27C97C, #0D9A58); }
.sq-green2 { background: linear-gradient(180deg, #199B60, #0B6E43); }
.sq-violet { background: linear-gradient(180deg, #FFD34D, #E8A200); }
.sq-pink   { background: linear-gradient(180deg, #FF6BA2, #D18E00); }
.sq-amber  { background: linear-gradient(180deg, #FFC55C, #F0961C); }
.sq-blue   { background: linear-gradient(180deg, #5E8EFB, #3463E8); }

/* referral strip */
.ref-strip { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 11px 12px; border-radius: var(--r-sm); background: linear-gradient(180deg, #FFF7DF, #FFF7DF); border: 1px solid rgba(245, 168, 0, .16); }
.ref-strip-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #241B00; flex: 0 0 auto; box-shadow: var(--e-brand); }
.ref-strip-ic .ic { width: 16px; height: 16px; }
.ref-strip small { display: block; font-size: 11px; color: #A97B00; font-weight: 600; }
.ref-strip b { display: block; font-size: 11.5px; color: var(--violet-deep); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-copy { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 0; color: var(--violet-deep); flex: 0 0 auto; }
.ref-copy:active { transform: scale(.9); }
.ref-copy .ic { width: 19px; height: 19px; }

/* ---------- 18. network & plan pickers ---------- */
.net-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.net-opt { cursor: pointer; }
.net-opt input { position: absolute; opacity: 0; pointer-events: none; }
.net-badge {
  display: grid; place-items: center; padding: 9px 4px; border-radius: 12px;
  background: var(--nc); color: var(--nt); font-size: 12.5px; font-weight: 800;
  border: 2px solid transparent; transition: .16s; letter-spacing: .01em;
}
.net-badge.nb-lg { padding: 13px 4px; font-size: 14px; border-radius: 14px; }
.net-opt.active .net-badge { border-color: var(--violet); box-shadow: var(--ring); }
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.plan-opt {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; cursor: pointer;
  background: var(--card); border: 2px solid var(--hairline); border-radius: var(--r-sm);
  transition: .16s; position: relative;
}
.plan-opt input { position: absolute; opacity: 0; pointer-events: none; }
.plan-opt b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.plan-opt .price { color: var(--violet); font-size: 13px; font-weight: 800; }
.plan-opt small { color: var(--ink-faint); font-size: 10.5px; }
.plan-opt:active { transform: scale(.97); }
.plan-opt.active { border-color: var(--violet); background: #FFF7DF; box-shadow: var(--ring); }

/* ---------- 19. task cards ---------- */
.task-card { padding: 13px; }
.tc-head { display: flex; gap: 11px; align-items: flex-start; }
.tc-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.tc-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 10.5px; color: var(--ink-faint); }
.tc-meta .ic { width: 12px; height: 12px; }
.tc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.tc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.tc-reward { text-align: right; flex: 0 0 auto; }
.tc-reward b { font-size: 15px; color: var(--violet); font-weight: 800; }
.tc-reward small { display: block; font-size: 9.5px; color: var(--ink-faint); }
.progress-bar { height: 6px; border-radius: 3px; background: #F4EFDF; overflow: hidden; margin-top: 10px; }
.progress-bar i { display: block; height: 100%; border-radius: 3px; background: var(--grad); }
.tc-category-label { margin-top: 8px; font-size: 11px; color: var(--ink-faint); font-weight: 600; }

/* ---------- Read & Earn (blog article) ---------- */
.read-earn-widget { border: 1px solid rgba(245, 168, 0, .35); }
.read-earn-widget.re-done { border-color: rgba(16, 166, 104, .45); }
.re-top { display: flex; align-items: center; gap: 11px; }
.re-top b { display: block; font-size: 14px; color: var(--ink); }
.re-top small { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; }
.re-count {
  flex: 0 0 auto; min-width: 44px; text-align: center; padding: 5px 10px; border-radius: 999px;
  background: #FFF3D1; color: #A97B00; font-size: 12.5px; font-weight: 800;
}
.re-bar { margin-top: 10px; }
.re-note { display: block; margin-top: 8px; font-size: 10.5px; color: var(--ink-faint); text-align: center; }
.read-ad-slot {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 14px 0; padding: 10px; border: 1px dashed rgba(201, 135, 0, .3);
  border-radius: var(--r-sm); background: #FFFDF5; min-height: 44px;
  color: var(--ink-faint); font-size: 10.5px; font-weight: 600; text-align: center;
}
.read-ad-slot .ic { width: 14px; height: 14px; }

/* ---------- dashboard quick-earn cards (Marketplace / Watch & Earn / Check-in) ---------- */
.earn-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.earn-card {
  background: var(--card); box-shadow: var(--e1); border-radius: 18px;
  padding: 14px 8px 12px; display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center; transition: transform .16s;
}
.earn-card:active { transform: scale(.96); }
.earn-card .row-ic { width: 44px; height: 44px; margin-bottom: 3px; }
.earn-card .row-ic .ic { width: 19px; height: 19px; }
.earn-card b { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.earn-card small { font-size: 10px; color: var(--ink-faint); line-height: 1.25; }

/* Gold CTA inside the free-platform popup */
.community-link.free-cta { background: var(--grad); color: #241B00; box-shadow: 0 7px 16px -6px rgba(185, 130, 0, .55); }
.community-link.free-cta .ic { width: 15px; height: 15px; }

/* ---------- fresh dashboard: greeting + 2×2 stat tiles ---------- */
.home-greeting { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 2px 0; }
.home-greeting .hg-hello { display: block; font-size: 12px; color: var(--ink-faint); font-weight: 600; }
.home-greeting b { display: block; margin-top: 1px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); line-height: 1.2; }
.fresh-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fs-tile {
  background: var(--card); box-shadow: var(--e1); border-radius: 16px;
  padding: 10px 12px; display: flex; flex-direction: column; gap: 1px;
}
.fs-tile .fs-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 5px; }
.fs-tile .fs-ic .ic { width: 14px; height: 14px; }
.fs-gold  { background: #FFF3D1; color: #A97B00; }
.fs-amber { background: #FFF3D6; color: #C77F0D; }
.fs-green { background: #D8F3E2; color: #12A94A; }
.fs-blue  { background: #D6E6FF; color: #2F6BFF; }
.fs-tile b { font-size: 14.5px; font-weight: 800; color: var(--ink); }
.fs-tile small { font-size: 10px; color: var(--ink-faint); font-weight: 600; }
@media (min-width: 480px) { .fresh-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Compact task rows — icon + one title/meta line + reward, whole row tappable */
.task-compact {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 11px 14px; border-radius: 16px;
  transition: transform .15s;
}
.task-compact:active { transform: scale(.98); }
.task-compact .row-ic { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.task-compact .row-ic .ic { width: 18px; height: 18px; }
.task-compact .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-compact .tc-title {
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task-compact .tc-meta { margin-top: 0; font-size: 11px; gap: 6px; }
.task-compact .tc-meta span { font-size: 11px; color: var(--ink-faint); }
.task-compact .tc-reward { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; flex: 0 0 auto; }
.task-compact .tc-reward b { font-size: 14px; color: var(--violet-deep); font-weight: 800; }
.task-compact .tc-reward small { font-size: 10px; color: var(--ink-faint); font-weight: 600; }
.task-compact .progress-bar { display: none; }
.task-compact .tc-tags .pill { font-size: 10px; padding: 2px 8px; }

/* Clean task-category hub: individual tasks stay hidden until a group opens. */
.task-hub-head { padding: 7px 3px 3px; }
.task-hub-kicker { display: block; color: var(--violet-deep); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.task-hub-head h1, .task-list-top h1 { margin-top: 4px; font-size: clamp(23px, 6vw, 29px); line-height: 1.14; }
.task-hub-head p, .task-list-top p { margin-top: 4px; color: var(--ink-faint); font-size: 12.5px; }
.task-search { margin: 3px 0 2px; }
.task-group-list { overflow: hidden; padding: 0; }
/* Task activation: always first for members who have not paid the ₦1,000 fee */
.task-activation-banner {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  background: linear-gradient(135deg, #FFF9E6, #FFF1B9);
  border: 1px solid rgba(240, 180, 41, .45); border-radius: var(--r-md);
  box-shadow: 0 8px 22px -16px rgba(174, 118, 0, .45);
}
.tab-activation-lock {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  flex: 0 0 auto; background: var(--grad); color: #241B00;
}
.tab-activation-lock .ic { width: 20px; height: 20px; }
.tab-activation-kicker { display: block; color: #9A6400; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; }
.task-activation-banner h2 { margin-top: 2px; font-size: 14px; color: var(--ink); }
.task-activation-banner p { margin-top: 2px; color: var(--ink-soft); font-size: 10.5px; line-height: 1.35; }
.task-activation-banner .btn { flex: 0 0 auto; min-height: 36px; padding: 7px 10px; font-size: 11.5px; white-space: nowrap; }
.task-activation-banner .btn .ic { width: 13px; height: 13px; }
@media (max-width: 370px) {
  .task-activation-banner { align-items: flex-start; }
  .task-activation-banner .btn { align-self: flex-end; }
}

/* Tasks-page earning options — compact single-purpose rows */
.task-more-list .task-group-row { min-height: 58px; padding: 8px 14px; gap: 11px; }
.task-more-list .task-group-row .row-ic { width: 34px; height: 34px; border-radius: 50%; }
.task-more-list .task-group-row .row-ic .ic { width: 16px; height: 16px; }
.task-more-list .task-group-row b { font-size: 13.5px; }
.task-more-list .task-group-row small { font-size: 10.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-more-list .task-group-row em { display: none; }
.task-more-list .task-group-arrow { font-size: 20px; }
.task-group-row { display: flex; align-items: center; gap: 13px; min-height: 84px; padding: 13px 15px; border-bottom: 1px solid var(--hairline-soft); transition: background .16s, transform .16s; }
.task-group-row:last-child { border-bottom: 0; }
.task-group-row:active { background: #FFF9E8; transform: scale(.99); }
.task-group-row .row-ic { width: 48px; height: 48px; border-radius: 16px; }
.task-group-row b { display: block; color: var(--ink); font-size: 15px; line-height: 1.2; }
.task-group-row small { display: block; margin-top: 3px; color: var(--ink-soft); font-size: 11.5px; line-height: 1.35; }
.task-group-row em { display: block; margin-top: 4px; color: var(--violet-deep); font-size: 10.5px; font-style: normal; font-weight: 700; }
.task-group-arrow { color: var(--violet); font-size: 28px; line-height: 1; font-style: normal; }
.task-list-top { padding: 3px 3px 1px; }
.task-back-link { display: inline-flex; align-items: center; gap: 4px; color: var(--violet-deep); font-size: 12px; font-weight: 700; }
.task-back-link .ic { width: 14px; height: 14px; }
.task-list-stack { margin-top: 3px; }

/* ---------- 20. notes, dl, stepper ---------- */
.note { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: var(--r-sm); font-size: 12px; line-height: 1.5; }
.note .ic { width: 16px; height: 16px; margin-top: 1px; flex: 0 0 auto; }
.note-ok     { background: #E2F6EC; border: 1px solid rgba(16, 166, 104, .25); color: #0B7A48; }
.note-danger { background: rgba(201, 135, 0, .07); border: 1px solid rgba(201, 135, 0, .3); color: #8A5E00; }
.note-warn   { background: rgba(255, 185, 48, .1); border: 1px solid rgba(240, 150, 28, .32); color: #92600A; }
.note-info   { background: rgba(62, 123, 250, .07); border: 1px solid rgba(62, 123, 250, .28); color: #1E50A8; }
.dl { display: flex; flex-direction: column; gap: 8px; }
.dl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.dl-row span { color: var(--ink-faint); }
.dl-row b { color: var(--ink); font-weight: 600; text-align: right; }
.stepper { display: flex; align-items: center; gap: 6px; padding: 6px 0 2px; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.step i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #F4EFDF; color: var(--ink-faint); font-style: normal; font-size: 12px; font-weight: 700; }
.step small { font-size: 9.5px; color: var(--ink-faint); font-weight: 600; }
.step.active i { background: var(--grad); color: #241B00; box-shadow: var(--e-brand); }
.step.active small { color: var(--violet-deep); }
.steps { display: flex; flex-direction: column; gap: 8px; padding-left: 4px; }
.steps li { list-style: none; position: relative; padding-left: 24px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.steps li::before { content: ''; position: absolute; left: 4px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--grad); box-shadow: var(--e-brand); }
.countdown b { color: var(--violet-deep); }

/* ---------- 21. sheet, modal, toast ---------- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 89; background: rgba(14, 12, 40, .55); opacity: 0; transition: opacity .22s; }
.sheet-backdrop.show { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  max-width: 660px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--hairline-soft); border-bottom: none;
  border-radius: 22px 22px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .28s cubic-bezier(.32, .72, .28, 1);
  visibility: hidden; box-shadow: 0 -14px 40px -18px rgba(60, 45, 0, .35);
}
.sheet.show { transform: translateY(0); visibility: visible; }
.sheet-grab { width: 42px; height: 4.5px; border-radius: 3px; background: #E5DFC8; margin: 2px auto 12px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sheet-head h3 { font-size: 16px; }
.sheet .qa-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sheet .qa-item { padding: 11px 4px; align-items: center; text-align: center; }
.qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qa-item { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px; border-radius: var(--r-sm); font-size: 11px; font-weight: 600; color: var(--ink-soft); }
.qa-item:active { transform: scale(.95); }
.qa-ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; }
.qa-ic .ic { width: 20px; height: 20px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 85; background: rgba(14, 12, 40, .58); display: grid; place-items: center; padding: 20px; opacity: 0; transition: opacity .2s; }
.modal-backdrop.show { opacity: 1; }
.modal { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--hairline-soft); border-radius: 24px; padding: 22px 18px; text-align: center; transform: scale(.94); transition: transform .2s; box-shadow: var(--e3); }
.modal-backdrop.show .modal { transform: scale(1); }
.modal .qa-ic { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; }
.modal .qa-ic .ic { width: 27px; height: 27px; }
.modal h3 { font-size: 17px; margin-bottom: 6px; }
.modal p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.modal .modal-amt { font-size: 30px; font-weight: 800; color: var(--violet); margin: 10px 0; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn { flex: 1; }

.toast-stack { position: fixed; bottom: calc(84px + env(safe-area-inset-bottom)); left: 0; right: 0; z-index: 130; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 15px; max-width: min(92vw, 420px);
  background: var(--card); border: 1px solid rgba(245, 168, 0, .35); border-radius: 14px;
  color: #9A6400; font-size: 13px; font-weight: 600; box-shadow: var(--e3);
  animation: toastIn .3s cubic-bezier(.2, .9, .3, 1.2);
}
.toast.err { border-color: rgba(201, 135, 0, .4); color: #8A5E00; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.95); } to { opacity: 1; transform: none; } }

/* ---------- 22. bills company picker ---------- */
.company-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.company-option { display: flex; align-items: center; gap: 7px; min-height: 66px; padding: 8px 9px; border: 1.5px solid var(--hairline); border-radius: var(--r-sm); background: var(--card); cursor: pointer; }
.company-option:has(input:checked) { border-color: var(--violet); background: #FFF7DF; }
.company-option input { position: absolute; opacity: 0; pointer-events: none; }
.company-option-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.company-option-main b { font-size: 10.5px; line-height: 1.24; color: var(--ink); }
.company-option-main small { font-size: 9px; line-height: 1.25; color: var(--ink-faint); }
.company-option-check { width: 17px; height: 17px; flex: 0 0 auto; border: 2px solid #D9D2B8; border-radius: 50%; }
.company-option:has(input:checked) .company-option-check { border: 5px solid var(--violet); }
@media (max-width: 340px) { .company-picker { grid-template-columns: 1fr; } }

/* ---------- 24. auth pages ---------- */
.auth-wrap { width: 100%; max-width: 420px; margin: 0 auto; padding: 26px 4px 40px; display: flex; flex-direction: column; }
.auth-hero { text-align: center; padding: 26px 16px 24px; }
.auth-hero h1 { font-size: 24px; margin-top: 4px; }
.auth-hero p { font-size: 13px; color: var(--ink-soft); margin-top: 6px; }
.auth-tag { display: flex; justify-content: center; gap: 8px; margin-top: 14px; font-size: 10.5px; font-weight: 700; color: #A97B00; letter-spacing: .12em; }
.auth-tag span { padding: 5px 12px; border-radius: 999px; background: var(--card); border: 1px solid rgba(245, 168, 0, .22); }
.divider { display: flex; align-items: center; gap: 12px; margin: 16px 0 4px; color: var(--ink-faint); font-size: 11px; font-weight: 600; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

/* ---------- 25. leaderboard & chat & support ---------- */
/* ---------- leaderboard: clean gold podium + rank rows ---------- */
.lb-head { text-align: center; padding: 6px 0 2px; }
.lb-crown-ic {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 19px;
  background: linear-gradient(160deg, #FFE082, #F0B429); color: #5C3D00; box-shadow: var(--e-brand);
}
.lb-crown-ic svg { width: 28px; height: 28px; }
.lb-head h1 { font-size: clamp(22px, 6vw, 28px); margin-top: 10px; letter-spacing: -.02em; }
.lb-head p { color: var(--ink-faint); font-size: 12px; margin-top: 2px; }
.lb-hero {
  background: var(--aurora); border-radius: var(--r-hero); padding: 16px 12px 14px;
  box-shadow: var(--e3), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.lb-pods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; align-items: end; }
.lb-pods.pods-1 { grid-template-columns: minmax(0, 210px); justify-content: center; }
.lb-pods.pods-2 { grid-template-columns: repeat(2, minmax(0, 170px)); justify-content: center; }
.lb-pod {
  background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 18px; padding: 12px 6px 10px; text-align: center;
}
.lb-pod.first {
  background: #FFFFFF; border: 0; border-radius: 20px; padding: 14px 8px 12px;
  box-shadow: 0 16px 32px -12px rgba(90, 60, 0, .38);
}
.lb-pod .avatar { margin: 0 auto; }
.lb-pod.first .avatar { box-shadow: 0 0 0 4px rgba(240, 180, 41, .5); }
.lb-pod .pod-crown { display: block; width: 26px; height: 26px; margin: 0 auto 6px; color: #F0B429; }
.lb-pod b { display: block; font-size: 12.5px; margin-top: 6px; color: var(--ink); line-height: 1.2; }
.lb-pod .amt { display: block; font-size: 13px; font-weight: 800; color: var(--ok); margin-top: 1px; }
.lb-chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 22px;
  padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 800; margin-top: 8px;
}
.lb-chip.c1 { background: linear-gradient(180deg, #FFE082, #F0B429); color: #5C3D00; }
.lb-chip.c2 { background: linear-gradient(180deg, #EDF1F5, #C2CFDB); color: #37475A; }
.lb-chip.c3 { background: linear-gradient(180deg, #F5C896, #DA9052); color: #5A3208; }
.lb-row { display: flex; align-items: center; gap: 11px; padding: 10px 14px; border-bottom: 1px solid var(--hairline-soft); }
.lb-row:last-child { border-bottom: none; }
.lb-row.me { background: #FFF8E3; }
.lb-row .amt { color: var(--ok); font-weight: 800; font-size: 13.5px; }
.lb-rank { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #F4EFDF; color: var(--ink-soft); font-size: 12px; font-weight: 800; flex: 0 0 auto; }
.lb-rank.r1 { background: linear-gradient(180deg, #FFE082, #F0B429); color: #5C3D00; }
.lb-rank.r2 { background: linear-gradient(180deg, #E8EDF2, #B9C6D3); color: #37475A; }
.lb-rank.r3 { background: linear-gradient(180deg, #F3C08B, #D98E4A); color: #5A3208; }
.chat { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.bubble { max-width: 78%; padding: 10px 13px; border-radius: 16px; font-size: 13px; line-height: 1.5; background: #FFF3D1; color: var(--ink); border-bottom-left-radius: 5px; align-self: flex-start; }
.bubble.me { background: var(--grad); color: #241B00; border-bottom-left-radius: 16px; border-bottom-right-radius: 5px; align-self: flex-end; box-shadow: var(--e-brand); }
.acc { border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); background: var(--card); margin-bottom: 8px; overflow: hidden; }
.acc summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 14px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
.acc summary::-webkit-details-marker { display: none; }
.acc[open] summary { border-bottom: 1px solid var(--hairline-soft); }
.acc-body { padding: 12px 14px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
.mgroup-title { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 14px 2px 7px; }

/* ---------- 26. upload box ---------- */
.upload-box { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 14px; border: 2px dashed #E3DCC4; border-radius: var(--r-md); background: var(--bg); color: var(--ink-soft); text-align: center; cursor: pointer; transition: .18s; }
.upload-box.drag { border-color: var(--violet); background: #FFF3D1; }
.upload-box .ic { width: 30px; height: 30px; color: var(--violet); }
.upload-box b { font-size: 13px; color: var(--ink); }
.upload-box small { font-size: 11px; color: var(--ink-faint); }

/* ---------- 27. more page ---------- */
.more-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.more-profile { display: flex; align-items: center; gap: 13px; }
.more-profile .who b { display: block; font-size: 15px; }
.more-profile .who small { color: var(--ink-faint); font-size: 12px; }

/* ---------- 28. bottom navigation ---------- */
.bottom-nav {
  position: sticky; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  width: 100%; max-width: 660px; margin: 0 auto;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(1.5) blur(16px);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  border-top: 1px solid transparent;
  box-shadow: 0 -8px 24px -14px rgba(60, 45, 0, .3);
  padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
}
.bottom-nav.bn-fixed { position: fixed; left: 0; right: 0; }
body.bn-fixed-on { padding-bottom: 76px; }
.bn-item { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #A39C88; font-size: 10px; font-weight: 600; letter-spacing: .02em; padding: 6px 4px 4px; border-radius: 14px; transition: .18s; }
.bn-item .bn-svg { width: 23px; height: 23px; }
.bn-item span { letter-spacing: .02em; }
.bn-item.active { color: var(--violet); font-weight: 700; background: rgba(245, 168, 0, .1); }
.bn-item:active { transform: scale(.92); }
.bn-plus {
  width: 56px; height: 56px; border-radius: 50%; margin: -26px auto 0;
  background: var(--grad); color: #241B00; display: grid; place-items: center;
  box-shadow: 0 0 0 6px rgba(245, 168, 0, .13), var(--e-brand);
}

/* ---------- 29. utilities ---------- */
.text-center { text-align: center; }
.text-muted { color: var(--ink-faint); }
.text-sm { font-size: 12.5px; }
.flex { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.hidden { display: none !important; }
.mono { font-family: 'SF Mono', ui-monospace, Menlo, monospace; }
.mt-1 { margin-top: 6px; } .mt-2 { margin-top: 10px; } .mt-3 { margin-top: 16px; }
.mb-1 { margin-bottom: 6px; } .mb-2 { margin-bottom: 10px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.tbl-wrap { overflow-x: auto; border-radius: var(--r-sm); }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); padding: 10px 12px; border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--hairline-soft); color: var(--ink); }
.tbl tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; }
.demo-banner {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 10px -6px 0; padding: 10px 12px; border-radius: var(--r-sm);
  background: rgba(62, 123, 250, .06); border: 1px solid rgba(62, 123, 250, .28);
  color: #1E50A8; font-size: 12px; line-height: 1.5;
}
.demo-banner .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--blue); flex: 0 0 auto; }
body.page-home .demo-banner { display: none; }

/* ---------- 30. entrance motion ---------- */
@keyframes kuRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
body.page-home .page > * { animation: kuRise .45s cubic-bezier(.2, .7, .3, 1) both; }
body.page-home .page > *:nth-child(2) { animation-delay: .04s; }
body.page-home .page > *:nth-child(3) { animation-delay: .08s; }
body.page-home .page > *:nth-child(4) { animation-delay: .12s; }
body.page-home .page > *:nth-child(5) { animation-delay: .16s; }
body.page-home .page > *:nth-child(n+6) { animation-delay: .2s; }
@media (prefers-reduced-motion: reduce) {
  body.page-home .page > * { animation: none; }
  * { transition-duration: .01ms !important; }
}

/* ---------- 31. dark mode ---------- */
html[data-theme="dark"] {
  --bg: #131008; --card: #1C180C;
  --hairline: rgba(255, 255, 255, .1); --hairline-soft: rgba(255, 255, 255, .06);
  --ink: #F5F1E1; --ink-soft: #B5AD8F; --ink-faint: #948C6F;
  --e1: 0 1px 2px rgba(0, 0, 0, .45);
  --e2: 0 6px 18px -6px rgba(0, 0, 0, .55);
  --e3: 0 18px 40px -14px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
html[data-theme="dark"] body { background: radial-gradient(720px 360px at 50% -160px, rgba(245, 168, 0, .16), transparent 70%), var(--bg); }
html[data-theme="dark"] .topbar { background: rgba(19, 16, 8, .9); border-bottom-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] body.page-home .topbar-actions .topbar-btn { background: #242010; border-color: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .logo-word, html[data-theme="dark"] .logo-word-alt,
html[data-theme="dark"] .topbar-title { color: #F7F3E3; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: #F7F3E3; }
html[data-theme="dark"] .seg-tab { color: #C9C2A6; }
html[data-theme="dark"] .seg-tabs { background: #242010; border-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .svc span, html[data-theme="dark"] .qa6-item span.qa6-label { color: #E6DFC5; }
html[data-theme="dark"] .qa6-item, html[data-theme="dark"] .wstat, html[data-theme="dark"] .stat-tile,
html[data-theme="dark"] .dash-stats, html[data-theme="dark"] .more-stat, html[data-theme="dark"] .pod { background: #1C180C; border-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .qa6-chev { background: #242010; color: #948C6F; }
html[data-theme="dark"] .ds-ic, html[data-theme="dark"] .wstat, html[data-theme="dark"] .lb-rank { background: #242010; }
html[data-theme="dark"] .ds-item b, html[data-theme="dark"] .wstat b, html[data-theme="dark"] .stat-tile b { color: #F7F3E3; }
html[data-theme="dark"] .sec-head h2, html[data-theme="dark"] .row-title,
html[data-theme="dark"] .tc-title, html[data-theme="dark"] .dl-row b { color: #F7F3E3; }
html[data-theme="dark"] .ref-strip { background: rgba(245, 168, 0, .1); }
html[data-theme="dark"] .bottom-nav { background: rgba(19, 16, 8, .94); border-top-color: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .bn-item.active { background: rgba(255, 197, 49, .16); }
html[data-theme="dark"] .btn-secondary { background: #242010; color: var(--ink); }
html[data-theme="dark"] .chip, html[data-theme="dark"] .icon-btn { background: #242010; border-color: rgba(255, 255, 255, .08); color: var(--ink-soft); }
html[data-theme="dark"] .inp { background: #242010; border-color: rgba(255, 255, 255, .1); color: var(--ink); }
html[data-theme="dark"] .bubble { background: #26220F; }
html[data-theme="dark"] .logo-bare-k { background: linear-gradient(165deg, #FFC531 20%, #4A3A08 95%); -webkit-background-clip: text; background-clip: text; }
html[data-theme="dark"] .brand-sub-green { color: #FFC531; }
html[data-theme="dark"] .logo-word-alt b { color: #FFC531; }
html[data-theme="dark"] .ref-strip small, html[data-theme="dark"] .ref-strip b,
html[data-theme="dark"] .ref-copy { color: #FFC531; }
html[data-theme="dark"] .tab { background: #242010; border-color: rgba(255, 255, 255, .07); color: #C9C2A6; }
html[data-theme="dark"] .plan-opt.active { background: #2A2512; }

/* ---------- 32. responsive & print ---------- */
@media (min-width: 480px) {
  .qa-grid { grid-template-columns: repeat(4, 1fr); }
  .sheet .qa-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  /* Every page centres consistently on wide screens — content and the
     bottom nav share one axis, so nothing ever looks tilted or offset. */
  .app-shell { margin-left: auto; margin-right: auto; max-width: 660px; padding-bottom: 110px; }
  body.page-wide .app-shell { max-width: 760px; }
  .bottom-nav { display: grid; }
  .qa-grid { grid-template-columns: repeat(6, 1fr); }
  .services { grid-template-columns: repeat(6, 1fr); }
  .sheet { max-width: 560px; border-radius: 22px; left: 50%; transform: translate(-50%, 105%); bottom: 12px; border: 1px solid var(--hairline-soft); }
  .sheet.show { transform: translate(-50%, 0); }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
}
@media (max-width: 380px) {
  .hw-amount { font-size: 26px; }
  .promo-earn .big { font-size: 26px; }
  .sheet .qa-grid { grid-template-columns: repeat(3, 1fr); }
  /* Stacking icon and label preserves the four balance tabs at 320px. */
  .seg-tab { flex-direction: column; gap: 2px; min-height: 50px; padding: 4px 1px; font-size: 9.5px; }
  .seg-tab .ic { width: 14px; height: 14px; }
  .qa6-item { min-height: 96px; }
  .qa6 { gap: 7px; }
}
@media print { .bottom-nav, .topbar, .sheet, .demo-banner, .toast-stack { display: none !important; } }

/* ---------- 33. touch feedback — every tappable responds visibly ---------- */
.tab:active {
  transform: scale(.94);
  border-color: var(--violet);
  color: var(--violet);
  background: #FFF3D1;
}
.tab:hover { border-color: rgba(245, 168, 0, .4); color: var(--violet); }
.task-card { transition: transform .15s, box-shadow .15s; }
.task-card:active { transform: scale(.985); box-shadow: var(--e2); }
.seg-tab:active { transform: scale(.95); }
.row:active, .mrow:active { background: rgba(245, 168, 0, .06); }
.link:active { opacity: .6; }
.avatar:active, .avatar-sm:active { transform: scale(.92); }
.service:active, .svc:active, .qa6-item:active, .cb-dot:active { transform: scale(.93); }
.empty:active, .card:active { transform: none; }

/* ---------- 34. MORE screen (drawer-style board) ---------- */
.more-hero {
  position: relative; overflow: hidden;
  background: var(--aurora);
  border: 1px solid rgba(122, 82, 0, .55);
  border-radius: var(--r-hero);
  padding: 16px;
  color: #241B00; box-shadow: var(--e3);
}
.mh-blob {
  position: absolute; right: -60px; top: -70px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 190, .5), transparent 62%); pointer-events: none;
}
.mh-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.mh-top .avatar { border-color: rgba(255, 255, 255, .85); width: 52px; height: 52px; font-size: 18px; }
.mh-who b { display: block; font-size: 16px; font-weight: 800; color: #241B00; }
.mh-who small { display: block; font-size: 11.5px; color: rgba(43, 32, 0, .8); margin-top: 1px; }
.mh-balance { margin-top: 14px; position: relative; z-index: 1; }
.mh-balance small { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(43, 32, 0, .75); }
.mh-balance b { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 2px 12px rgba(0, 0, 0, .22); }
.mh-badge {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 6px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .3);
  color: #3D2F00; font-size: 10.5px; font-weight: 700;
}
.more-menu { display: flex; flex-direction: column; }
.more-group-title {
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin: 16px 4px 7px;
}
.more-group-title:first-child { margin-top: 6px; }
.more-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 8px; border-radius: 15px;
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  transition: background .15s, transform .15s;
}
.more-row:active { transform: scale(.98); background: rgba(245, 168, 0, .07); }
.more-row .mr-ic {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--bg); color: var(--ink-soft);
}
.more-row .mr-ic .ic { width: 19px; height: 19px; }
.more-row.active {
  background: var(--grad); color: #241B00;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), var(--e-brand);
}
.more-row.active .mr-ic { background: rgba(255, 255, 255, .45); color: #241B00; }
.mt-violet { background: #FFF3D1; color: #F5A800; }
.mt-green  { background: #E2F6EC; color: #0D9A58; }
.mt-blue   { background: #E8F0FE; color: #3463E8; }
.mt-gold   { background: #FFF3D6; color: #C77E12; }
.mt-pink   { background: #FFF3D1; color: #D18E00; }
.mt-cyan   { background: #E0F6FA; color: #0D93B0; }
.mt-red    { background: #FFF3D1; color: #D18E00; }
.more-logout {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 20px; padding: 14px; border-radius: 15px;
  background: #FFF3D1; color: #8A5E00;
  font-size: 14px; font-weight: 700; transition: transform .15s;
}
.more-logout:active { transform: scale(.97); }
html[data-theme="dark"] .more-row { color: var(--ink); }
html[data-theme="dark"] .more-row .mr-ic { background: #242010; color: #B5AD8F; }
html[data-theme="dark"] .mt-violet { background: #251F4A; color: #FFC531; }
html[data-theme="dark"] .mt-green  { background: #11321F; color: #27C97C; }
html[data-theme="dark"] .mt-blue   { background: #16244F; color: #5E8EFB; }
html[data-theme="dark"] .mt-gold   { background: #38290E; color: #FFC55C; }
html[data-theme="dark"] .mt-pink   { background: #3D1630; color: #FF6BA2; }
html[data-theme="dark"] .mt-cyan   { background: #0E2E36; color: #2BC9E4; }
html[data-theme="dark"] .mt-red    { background: #3B1717; color: #FFD14D; }
html[data-theme="dark"] .more-logout { background: rgba(201, 135, 0, .12); color: #FFD14D; }

/* ---------- 35. side drawer menu (opens over any page) ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 139; background: rgba(10, 8, 34, .55); opacity: 0; transition: opacity .25s; }
.drawer-backdrop.show { opacity: 1; }
.drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 140;
  width: min(84%, 342px);
  background: var(--bg);
  transform: translateX(-105%);
  transition: transform .28s cubic-bezier(.32, .72, .28, 1);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 12px 12px calc(24px + env(safe-area-inset-bottom));
  box-shadow: 24px 0 60px rgba(10, 8, 40, .35);
}
.drawer.show { transform: none; }
.drawer .more-hero { margin-bottom: 4px; }
.drawer .more-group-title:first-of-type { margin-top: 10px; }
.mh-close {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .16); color: #3D2F00;
  display: grid; place-items: center; transition: transform .18s;
}
.mh-close:active { transform: scale(.9); background: rgba(255, 255, 255, .3); }
.mh-close .ic { width: 19px; height: 19px; }
html[data-theme="dark"] .drawer { background: #131008; }

/* ---------- 36. drawer COMPACT — user spec: ~40% of screen width ---------- */
.drawer { width: clamp(158px, 42vw, 230px); padding: 10px 8px calc(18px + env(safe-area-inset-bottom)); }
.drawer .more-hero { padding: 12px 10px; border-radius: 20px; }
.drawer .mh-top .avatar { width: 38px; height: 38px; font-size: 14px; }
.drawer .mh-who b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.drawer .mh-who small { font-size: 10px; }
.drawer .mh-balance { margin-top: 10px; }
.drawer .mh-balance b { font-size: 20px; }
.drawer .mh-badge { font-size: 8.5px; padding: 4px 9px; margin-top: 9px; }
.drawer .mh-close { width: 30px; height: 30px; top: 8px; right: 8px; }
.drawer .mh-close .ic { width: 15px; height: 15px; }
.drawer .more-group-title { margin: 11px 4px 5px; font-size: 8.5px; letter-spacing: .12em; }
.drawer .more-row { padding: 7px 6px; border-radius: 12px; gap: 8px; font-size: 11px; font-weight: 600; }
.drawer .more-row > span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer .mr-ic { width: 30px; height: 30px; border-radius: 10px; }
.drawer .mr-ic .ic { width: 14px; height: 14px; }
.drawer .more-logout { margin-top: 14px; padding: 10px; border-radius: 12px; font-size: 11.5px; }

/* ---------- 37. drawer FINAL — exactly 40% width, slides from left ---------- */
.drawer { width: 40vw !important; min-width: 0; max-width: none; padding: 10px 8px calc(18px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .drawer { width: 40vw !important; max-width: none; } }

/* ---------- 38. drawer-style More PAGE (no-JS fallback, cache-proof) ---------- */
body.page-drawer-open { background: #141006; overflow: hidden; }
.dp-backdrop { position: fixed; inset: 0; z-index: 139; background: rgba(10, 8, 34, .6); }
.dp-visible { transform: none !important; }

/* ---------- 39. drawer width +10% → 50% of screen ---------- */
.drawer { width: 50vw !important; }

/* ---------- 40. Gmail Marketplace ---------- */
.mp-hero {
  display: flex; align-items: center; gap: 13px;
  background: var(--aurora); border: 1px solid rgba(122, 82, 0, .55);
  border-radius: var(--r-lg); padding: 15px 16px; color: #241B00; box-shadow: var(--e3);
}
.mp-orb {
  width: 46px; height: 46px; border-radius: 15px; flex: 0 0 auto;
  display: grid; place-items: center; background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
}
.mp-orb .ic { width: 22px; height: 22px; }
.mp-hero h2 { font-size: 17px; color: #241B00; }
.mp-hero p { font-size: 11.5px; color: rgba(43, 32, 0, .88); margin-top: 2px; }
.mp-creds { display: grid; gap: 8px; margin-top: 12px; }
.mp-cred { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 10px 12px; }
.mp-cred small { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.mp-cred-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.mp-cred-row code { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; color: var(--violet-deep); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-cred-mask] { cursor: pointer; }

/* ---------- daily check-in (check-in.php) ---------- */
.ck-hero { background: var(--aurora); border: 1px solid rgba(122, 82, 0, .55); border-radius: var(--r-lg); padding: 16px; color: #241B00; box-shadow: var(--e3); position: relative; overflow: hidden; }
.ck-orb { position: absolute; top: -26px; right: -26px; width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); }
.ck-orb .ic { width: 34px; height: 34px; opacity: .9; }
.ck-hero h2 { font-size: 18px; color: #241B00; margin-top: 2px; }
.ck-hero > p { font-size: 12px; color: rgba(43, 32, 0, .88); margin-top: 3px; max-width: 30ch; }
.ck-streak { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; padding: 5px 12px 5px 8px; }
.ck-streak .ck-flame .ic { width: 16px; height: 16px; color: var(--gold); display: block; }
.ck-streak b { font-size: 14px; color: #241B00; }
.ck-streak small { font-size: 10.5px; color: rgba(43, 32, 0, .85); font-weight: 600; }
.ck-today { margin: 12px 0 10px; background: rgba(255, 255, 255, .12); border: 1px dashed rgba(255, 255, 255, .4); border-radius: var(--r-sm); padding: 10px 12px; }
.ck-today small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(43, 32, 0, .8); }
.ck-today b { font-size: 22px; color: #241B00; }
.ck-cycle-hint { font-size: 10.5px; font-weight: 700; color: var(--ink-faint); }
.ck-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 4px; }
.ck-day { display: grid; place-items: center; gap: 3px; padding: 10px 2px 8px; background: var(--bg); border: 1.5px solid var(--hairline); border-radius: var(--r-sm); text-align: center; }
.ck-day b { font-size: 11px; font-weight: 800; color: var(--ink-soft); }
.ck-day small { font-size: 9.5px; font-weight: 700; color: var(--ink-faint); }
.ck-day-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--hairline); color: var(--ink-faint); }
.ck-day-ic .ic { width: 13px; height: 13px; }
.ck-day.done { border-color: rgba(15, 169, 104, .45); background: rgba(15, 169, 104, .07); }
.ck-day.done .ck-day-ic { background: var(--ok); border-color: var(--ok); color: #fff; }
.ck-day.done b, .ck-day.done small { color: var(--ok); }
.ck-day.today { border-color: var(--violet); box-shadow: var(--ring); }
.ck-day.today b { color: var(--violet-deep); }
.ck-day.today.done { border-color: var(--ok); box-shadow: 0 0 0 4px rgba(15, 169, 104, .14); }
.ck-day:nth-child(7):not(.done) .ck-day-ic { color: var(--gold); border-color: rgba(255, 185, 48, .5); }
/* notification dot for the unclaimed home tile */
.qa6-ic { position: relative; }
.qa6-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); border: 2px solid var(--card); box-shadow: var(--e1); }
/* dark theme */
html[data-theme="dark"] .ck-day { background: #242010; border-color: #332D14; }
html[data-theme="dark"] .ck-day b { color: #E6DFC5; }
html[data-theme="dark"] .ck-day small { color: #948C6F; }
html[data-theme="dark"] .ck-day-ic { background: #23224a; border-color: #332D14; }
html[data-theme="dark"] .ck-day.done { background: rgba(15, 169, 104, .12); border-color: rgba(15, 169, 104, .55); }
html[data-theme="dark"] .ck-day.today { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(245, 168, 0, .22); }
html[data-theme="dark"] .ck-cycle-hint { color: #948C6F; }
/* smallest phones: tighter day tiles */
@media (max-width: 360px) {
  .ck-strip { gap: 4px; }
  .ck-day { padding: 8px 1px 6px; }
  .ck-day b { font-size: 10px; }
  .ck-day small { font-size: 8.5px; }
}

/* ---------- blog (blog.php / post.php) ---------- */
.bl-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bl-cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--bg); }
.bl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-cover.sm { border-radius: var(--r-sm); }
.bl-cover.art { margin: -4px -4px 12px; border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-sm); }
.bl-cover.bl-ph { display: grid; place-items: center; }
.bl-cover.bl-ph .ic-lg { width: 34px; height: 34px; opacity: .85; }
.bl-ph.tone-violet { background: linear-gradient(150deg, #F5A800 0%, #C98700 100%); color: #DCDFFF; }
.bl-ph.tone-blue   { background: linear-gradient(150deg, #3E7BFA 0%, #24409B 100%); color: #D6E4FF; }
.bl-ph.tone-gold   { background: linear-gradient(150deg, #FFB930 0%, #C77F0D 100%); color: #FFF3D8; }
.bl-ph.tone-red    { background: linear-gradient(150deg, #F2B705 0%, #C98700 100%); color: #FFF3D1; }
.bl-ph.tone-cyan   { background: linear-gradient(150deg, #0FB5D6 0%, #0B6E86 100%); color: #D8F6FF; }
.bl-cat { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--violet-deep); }
.bl-hero { display: block; padding: 10px; }
.bl-hero .bl-cover { margin-bottom: 12px; }
.bl-hero .bl-cat { position: absolute; left: 10px; bottom: 10px; z-index: 1; padding: 4px 9px; border-radius: 999px; background: rgba(20, 20, 58, .78); color: #EDEBFF; backdrop-filter: blur(6px); }
.bl-hero-body b { display: block; font-size: 16.5px; line-height: 1.3; color: var(--ink); }
.bl-hero-body p { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }
.bl-hero-body small { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); margin-top: 8px; }
.bl-card { padding: 9px; }
.bl-card-body { padding: 10px 6px 4px; }
.bl-card-body b { display: block; font-size: 13.5px; line-height: 1.3; color: var(--ink); }
.bl-card-body p { font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); margin: 4px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-card-body small { font-size: 10px; font-weight: 700; color: var(--ink-faint); }
.bl-article { padding: 14px; }
.bl-article-head { display: flex; gap: 12px; align-items: flex-start; }
.bl-article-head h1 { font-size: 19px; line-height: 1.25; color: var(--ink); margin-top: 4px; }
.bl-article-head small { display: block; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); margin-top: 5px; }
.bl-excerpt { font-size: 13px; line-height: 1.55; font-weight: 600; color: var(--ink-soft); border-left: 3px solid var(--violet); padding: 2px 0 2px 12px; margin: 14px 0 4px; }
.bl-body { margin-top: 14px; }
.bl-body p { font-size: 13.5px; line-height: 1.75; color: var(--ink-soft); margin: 0 0 12px; }
.bl-body h3 { font-size: 15px; color: var(--ink); margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--hairline); }
.bl-body ul { margin: 0 0 12px; padding-left: 20px; }
.bl-body li { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 5px; }
.bl-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.bl-share small { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-right: 2px; }
/* dark theme */
html[data-theme="dark"] .bl-hero-body b, html[data-theme="dark"] .bl-card-body b, html[data-theme="dark"] .bl-article-head h1, html[data-theme="dark"] .bl-body h3 { color: #F0F1FB; }
html[data-theme="dark"] .bl-hero-body p, html[data-theme="dark"] .bl-card-body p, html[data-theme="dark"] .bl-body p,
html[data-theme="dark"] .bl-body li, html[data-theme="dark"] .bl-excerpt { color: #B9BDD8; }
html[data-theme="dark"] .bl-cover { background: #242010; }

/* ---------- zoom lock (app-like: no pinch/double-tap zoom) ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Keep the public app app-like, but the activity-heavy Admin panel is
   intentionally zoomable for tables, records and financial review. */
body:not(.admin-body) { touch-action: manipulation; }

/* ---------- activation transfer card: big copyable details, no zoom needed ---------- */
.act-van { display: grid; gap: 10px; margin-top: 10px; }
.act-van-row, .act-van-main { background: var(--bg); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 10px 12px; }
.act-van-row small, .act-van-main small { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.act-van-row > b { font-size: 15.5px; color: var(--ink); word-break: break-word; }
.act-van-main { background: rgba(245, 168, 0, .06); border: 1.5px solid rgba(245, 168, 0, .35); }
.act-van-num-row, .act-van-name-row { display: flex; align-items: center; gap: 10px; }
.act-van-num { font-size: clamp(24px, 8vw, 30px); font-weight: 800; letter-spacing: .05em; color: var(--violet-deep); cursor: pointer; -webkit-user-select: all; user-select: all; line-height: 1.2; }
.act-van-name { font-size: clamp(15px, 4.6vw, 18px); font-weight: 700; color: var(--ink); word-break: break-word; cursor: pointer; -webkit-user-select: all; user-select: all; line-height: 1.3; }
.act-copy { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 12px; border: 1.5px solid rgba(245, 168, 0, .4); background: var(--card); color: var(--violet-deep); font-size: 13.5px; font-weight: 800; transition: .18s; }
.act-copy:active { transform: scale(.95); background: rgba(245, 168, 0, .1); }
.act-van-num:active, .act-van-name:active { opacity: .6; }
html[data-theme="dark"] .act-van-row, html[data-theme="dark"] .act-van-main { background: #242010; border-color: #332D14; }
html[data-theme="dark"] .act-van-main { background: rgba(245, 168, 0, .12); border-color: rgba(245, 168, 0, .5); }
html[data-theme="dark"] .act-van-row > b, html[data-theme="dark"] .act-van-name { color: #F0F1FB; }
html[data-theme="dark"] .act-van-num { color: #FFD34D; }
html[data-theme="dark"] .act-copy { background: #23224A; color: #C9BBFF; }

/* ---------- community popup (shown on return to the dashboard) ---------- */
.community-modal-backdrop {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(10, 8, 34, .64); backdrop-filter: blur(5px);
}
.community-modal-backdrop[hidden] { display: none; }
.community-modal {
  position: relative; width: min(100%, 350px); overflow: hidden;
  padding: 24px 18px 18px; border-radius: 24px; text-align: center; color: #241B00;
  background:
    radial-gradient(260px 150px at 50% -12%, rgba(255, 244, 204, .6), transparent 70%),
    linear-gradient(150deg, #FFD34D, #F0A500 55%, #D18E00);
  box-shadow: 0 28px 70px rgba(60, 45, 0, .4);
}
.community-close {
  position: absolute; top: 12px; right: 12px; z-index: 5; display: grid; place-items: center;
  width: 36px; height: 36px; border: 0; border-radius: 50%; color: #DCDFFF;
  background: rgba(94, 66, 0, .55); transition: transform .18s, background .18s;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.community-close:active { transform: scale(.9); background: rgba(94, 66, 0, .85); }
.community-close .ic { width: 19px; height: 19px; pointer-events: none; }
/* invisible enlarged touch zone — same look, easier to hit on phones */
.community-close::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
.community-orb {
  position: relative; z-index: 1; display: grid; place-items: center; width: 64px; height: 64px;
  margin: 0 auto 14px; border-radius: 50%; color: #241B00; background: var(--grad);
  box-shadow: 0 10px 26px rgba(245, 168, 0, .55);
}
.community-orb svg { width: 34px; height: 34px; transform: translateX(-2px); }
.community-modal h2 { position: relative; z-index: 1; color: #241B00; font-size: clamp(20px, 5.6vw, 23px); line-height: 1.15; }
.community-modal p { position: relative; z-index: 1; max-width: 32ch; margin: 8px auto 16px; color: #6E5715; font-size: 12.5px; line-height: 1.5; }
.community-links { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.community-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; border-radius: 13px; color: #FFF; font-size: 12.5px; font-weight: 800; transition: transform .18s, filter .18s; }
.community-link svg { width: 18px; height: 18px; }
.community-link:active { transform: scale(.96); filter: brightness(.92); }
.community-link.telegram { background: #2487C9; box-shadow: 0 7px 16px rgba(36, 135, 201, .28); }
.community-link.whatsapp { background: #18A34A; box-shadow: 0 7px 16px rgba(24, 163, 74, .24); }
.community-later {
  position: relative; z-index: 5; margin-top: 12px; border: 0; padding: 12px 22px;
  background: transparent; color: #6E5715; font-size: 12.5px; font-weight: 700;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.community-later:hover { color: #241B00; }
.community-later::after { content: ''; position: absolute; inset: -6px; }

/* ---------- watch & earn ad box ---------- */
.ad-box { position: relative; min-height: 140px; margin-top: 8px; border: 1.5px dashed rgba(201, 135, 0, .5); border-radius: var(--r-md); background: rgba(245, 168, 0, .06); overflow: hidden; }
.ad-box-ph { position: absolute; inset: 0; display: grid; place-items: center; gap: 6px; align-content: center; color: var(--ink-faint); font-size: 11px; font-weight: 700; }
.ad-box-ph .ic { width: 30px; height: 30px; opacity: .6; }
html[data-theme="dark"] .ad-box { background: rgba(245, 168, 0, .08); border-color: rgba(245, 168, 0, .4); }
.ad-box.tall { min-height: 300px; }
.ad-play { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; padding: 14px; }
.ad-play .btn { min-height: 46px; padding: 12px 26px; font-size: 15px; }
.ad-play small { font-size: 11.5px; color: var(--ink-faint); font-weight: 600; text-align: center; }

/* ---------- public landing page ---------- */
body.page-landing { background: var(--bg); }
.ld-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
          padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
          background: rgba(244, 245, 251, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hairline-soft); }
.ld-nav-login { padding: 9px 18px; border-radius: 12px; background: var(--grad-deep); color: #241B00; font-size: 13px; font-weight: 700; }
.ld-hero { background: var(--aurora); border-radius: 0 0 var(--r-hero) var(--r-hero); color: #241B00;
           padding: 44px 18px 96px; text-align: center; box-shadow: var(--e3); }
.ld-hero-inner { max-width: 560px; margin: 0 auto; }
.ld-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .14);
            border: 1px solid rgba(255, 255, 255, .3); font-size: 11.5px; font-weight: 700; }
.ld-hero h1 { font-size: clamp(30px, 9vw, 46px); line-height: 1.08; color: #241B00; margin: 14px 0 10px; letter-spacing: -.02em; }
.ld-hero p { font-size: 14px; color: rgba(43, 32, 0, .9); max-width: 40ch; margin: 0 auto 20px; }
.ld-hero-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ld-hero-cta .btn { min-height: 50px; padding: 0 24px; font-size: 14.5px; }
.ld-hero-cta .btn-secondary { background: rgba(255, 255, 255, .35); border: 1px solid rgba(36, 27, 0, .35); color: #241B00; }
.ld-stats { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.ld-stat { background: rgba(255, 255, 255, .45); border: 1px solid rgba(36, 27, 0, .18); border-radius: var(--r-sm);
           padding: 10px 18px; min-width: 96px; }
.ld-stat b { display: block; font-size: 17px; color: #241B00; }
.ld-stat small { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(43, 32, 0, .8); }
.ld-section { max-width: 640px; margin: 0 auto; padding: 34px 16px 10px; text-align: center; }
.ld-section h2 { font-size: 21px; margin-bottom: 18px; }
.ld-grid { display: grid; grid-template-columns: 1fr; gap: 10px; text-align: left; }
.ld-card { background: var(--card); border: 1px solid var(--hairline-soft); border-radius: var(--r-md); padding: 14px;
           display: flex; flex-direction: column; gap: 6px; box-shadow: var(--e1); }
.ld-card b { font-size: 14.5px; }
.ld-card p { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.ld-alt { background: linear-gradient(180deg, rgba(245, 168, 0, .06), transparent); border-radius: var(--r-lg); margin-top: 12px; }
.ld-steps { display: grid; gap: 12px; text-align: left; }
.ld-step { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--hairline-soft);
           border-radius: var(--r-md); padding: 14px; box-shadow: var(--e1); }
.ld-step i { font-style: normal; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
             background: var(--grad); color: #241B00; font-weight: 800; font-size: 15px; }
.ld-step b { font-size: 14px; display: block; }
.ld-step p { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
.ld-proof { display: grid; gap: 8px; text-align: left; }
.ld-proof-row { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--hairline-soft);
                border-radius: var(--r-sm); padding: 11px 14px; box-shadow: var(--e1); }
.ld-proof-row b { font-size: 13.5px; display: block; }
.ld-proof-row small { font-size: 11.5px; color: var(--ink-faint); }
.ld-trust { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.ld-trust-item { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
                 background: var(--card); border: 1px solid var(--hairline); font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.ld-cta { background: var(--aurora); border-radius: var(--r-hero); margin: 30px auto 20px; max-width: 640px; padding: 40px 18px; text-align: center; color: #241B00; }
.ld-cta h2 { color: #241B00; font-size: 24px; }
.ld-cta p { color: rgba(43, 32, 0, .9); font-size: 13px; margin: 6px 0 18px; }
.ld-cta .btn { min-height: 52px; padding: 0 30px; font-size: 15px; }
.ld-cta small { display: block; margin-top: 12px; color: rgba(43, 32, 0, .8); font-size: 12px; }
.ld-cta small a { color: #241B00; font-weight: 700; text-decoration: underline; }
.ld-foot { text-align: center; padding: 26px 16px calc(34px + env(safe-area-inset-bottom)); }
.ld-foot .logo-word { display: block; margin-bottom: 10px; }
.ld-foot nav { display: flex; gap: 16px; justify-content: center; margin-bottom: 10px; }
.ld-foot nav a { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.ld-foot small { color: var(--ink-faint); font-size: 11px; }
.wa-share { background: #18A34A; box-shadow: 0 10px 24px -8px rgba(24, 163, 74, .5); }
@media (min-width: 640px) {
  .ld-grid { grid-template-columns: repeat(2, 1fr); }
  .ld-steps { grid-template-columns: repeat(3, 1fr); }
  .ld-step { flex-direction: column; }
}
html[data-theme="dark"] .ld-alt { background: linear-gradient(180deg, rgba(245, 168, 0, .14), transparent); }
html[data-theme="dark"] .ld-card, html[data-theme="dark"] .ld-step, html[data-theme="dark"] .ld-proof-row,
html[data-theme="dark"] .ld-trust-item { background: #242010; border-color: #332D14; }
html[data-theme="dark"] .ld-card p, html[data-theme="dark"] .ld-step p { color: #B9BDD8; }

/* ---------- submit spinner ---------- */
.ic.spin { animation: ku-spin .8s linear infinite; }
@keyframes ku-spin { to { transform: rotate(360deg); } }

/* ---------- running loading overlay (auth forms) ---------- */
.ku-load { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
           background: rgba(244, 245, 251, .97); backdrop-filter: blur(6px); }
html[data-theme="dark"] .ku-load { background: rgba(10, 9, 26, .97); }
.ku-load-box { width: min(84vw, 300px); text-align: center; }
.ku-load-logo { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 19px; display: grid; place-items: center;
                background: var(--grad-deep); color: #241B00; font-weight: 800; font-size: 32px; box-shadow: var(--e-brand);
                animation: ku-breathe 1.4s ease-in-out infinite; }
@keyframes ku-breathe { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.88); opacity: .75; } }
.ku-load-title { font-size: 14.5px; font-weight: 800; color: var(--ink); }
html[data-theme="dark"] .ku-load-title { color: #F0F1FB; }
.ku-load-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }
/* the RUNNING bar — slides continuously, never static */
.ku-load-track { position: relative; height: 7px; margin-top: 18px; border-radius: 99px; background: rgba(245, 168, 0, .16); overflow: hidden; }
html[data-theme="dark"] .ku-load-track { background: rgba(245, 168, 0, .25); }
.ku-load-bar { position: absolute; top: 0; bottom: 0; width: 42%; border-radius: 99px;
               background: linear-gradient(90deg, #FFC531, #0FB5D6);
               animation: ku-run 1.05s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes ku-run { 0% { left: -45%; } 100% { left: 103%; } }

/* Admin deliberately uses normal browser touch behaviour: open at the
   phone's native screen size, pinch outward to inspect dense records. */
body.admin-body { touch-action: auto; }

/* Self-hosted Poppins fallback — system font renders instantly, then
   Poppins swaps in when ready (no blank text, no external blocking). */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: local('Poppins');
}
/* =====================================================================
   KASHUP V13.2 — LIGHT AIRY PRO
   The light V13 look you liked, tuned brighter and more professional:
   near-white canvas, pure-white cards, bright sky-blue header, light-blue
   wallet card with a big dark-blue balance, solid blue buttons.
   One theme only — nothing stacked.
   ===================================================================== */

/* ---------- palette ---------- */
:root {
  --bg: #F7FAFF;
  --card: #FFFFFF;
  --ink: #10203E;
  --ink-soft: #52627E;
  --ink-faint: #8successB;
  --ink-faint: #8B99B0;
  --hairline: #E8EFF9;
  --hairline-soft: #F1F6FD;
  --violet: #2E7BFF;
  --violet-deep: #1B5CE6;
  --indigo: #0E2A66;
  --cyan: #2E7BFF;
  --coral: #2E7BFF;
  --gold: #2E7BFF;
  --ok: #12A150;
  --red: #E5484D;
  --blue: #2E7BFF;
  --pink: #2E7BFF;
  --grad: linear-gradient(135deg, #4C9CFF, #1B5CE6);
  --grad-deep: linear-gradient(135deg, #1B5CE6, #0E2A66);
  --aurora: linear-gradient(135deg, #4C9CFF, #1B5CE6);
  --ring: 0 0 0 4px rgba(46, 123, 255, .15);
  --e1: 0 1px 2px rgba(16, 32, 62, .04), 0 8px 20px -14px rgba(16, 32, 62, .12);
  --e2: 0 2px 6px rgba(16, 32, 62, .05), 0 14px 28px -18px rgba(16, 32, 62, .16);
  --e3: 0 18px 36px -22px rgba(27, 92, 230, .30);
  --e-brand: 0 10px 20px -12px rgba(27, 92, 230, .55);
  --r-xs: 10px; --r-sm: 16px; --r-md: 20px; --r-lg: 24px; --r-hero: 26px;
}

/* ---------- base ---------- */
html { background: #F7FAFF; }
body {
  background: #F7FAFF;
  color: var(--ink);
  font-size: 15px; line-height: 1.5; letter-spacing: -.008em;
}
h1, h2, h3, h4 { color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(25px, 7vw, 30px); }
h2, .sec-head h2 { font-size: 17.5px; }
.row-title, .tc-title, .mrow b { color: var(--ink); font-size: 15px; font-weight: 700; }
.row-sub, .tc-meta, .hint { color: var(--ink-soft); font-size: 12px; }
::selection { background: #D9E8FF; color: var(--ink); }
::-webkit-scrollbar-thumb { background: #D6DFEC; }
.mono, .bc-amount, .hw-amount, .wa-reward-card b { font-variant-numeric: tabular-nums; }

/* ---------- header: bright sky-blue gradient, level full width ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: calc(100% + 32px);
  margin-left: -16px; margin-right: -16px;
  padding: env(safe-area-inset-top) 16px 0;
  height: calc(60px + env(safe-area-inset-top));
  box-sizing: border-box;
  background: linear-gradient(120deg, #12285A 0%, #1E3A8A 100%);
  border-bottom: 0;
  box-shadow: 0 8px 22px -14px rgba(9, 18, 45, .85);
  transform: none;
}
.topbar-title, .topbar a, .logo-word, .logo-word span { color: #FFFFFF; }
.brand-sub, .brand-sub-green { color: #B9C8E8; }
/* naked white icons on navy — the reference app's tactic */
.topbar-btn, .icon-btn {
  width: 42px; height: 42px; border-radius: 13px;
  background: transparent;
  border: 0;
  box-shadow: none; color: #FFFFFF;
}
.topbar-btn:active { background: rgba(255, 255, 255, .32); transform: scale(.93); }
.logo-mark { background: #FFFFFF; color: #1B5CE6; box-shadow: none; }
/* home header buttons: naked white on navy */
body.page-home .topbar-actions .topbar-btn {
  background: transparent; border: 0; color: #FFFFFF;
}
body.page-home .topbar-actions .topbar-btn .ic { color: #FFFFFF; }
body.page-home .topbar-actions .avatar {
  background: #FFFFFF; color: #12285A; border: 2px solid rgba(255, 255, 255, .35); box-shadow: none;
}
.logo-bare-k { background: none; -webkit-text-fill-color: #FFFFFF; color: #FFFFFF; }
.topbar-btn .dot { background: #FFD34D; color: #3B2700; border-color: #2E7BFF; }

/* ---------- home hero: bright blue fading fast into near-white ---------- */
body.page-home { background: #F7FAFF; }
body.page-home .app-shell {
  width: min(100%, 520px);
  margin-left: auto; margin-right: auto;
  padding-left: 16px; padding-right: 16px;
}
body.page-home .page {
  display: flex; flex-direction: column; gap: 14px;
  background: linear-gradient(180deg, #12285A 0, #1E3A8A 218px, #F7FAFF 340px);
  padding-top: 14px; padding-bottom: 20px;
  margin-top: -6px;
}
.home-greeting .hg-hello { color: #B9C8E8; font-size: 12px; }
.home-greeting b { color: #FFFFFF; font-size: 23px; }
body.page-home .seg-tabs {
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: none;
}
body.page-home .seg-tab { color: #C3D2F0; }
body.page-home .seg-tab .ic { color: #C3D2F0; }
body.page-home .seg-tab.active,
body.page-home .tab.active {
  background: #FFFFFF; color: #1B5CE6; box-shadow: 0 6px 14px -10px rgba(9, 30, 80, .6);
}
body.page-home .seg-tab.active .ic,
body.page-home .tab.active .ic { color: #1B5CE6; }
.seg-tab.active, .tab.active, .chip.active {
  background: #FFFFFF; color: #1B5CE6; box-shadow: 0 6px 14px -10px rgba(9, 30, 80, .6);
}
.seg-tab.active .ic, .tab.active .ic { color: #1B5CE6; }

/* ---------- wallet card: PURE WHITE floating on the navy hero ---------- */
.balance-card, .hero-wallet {
  position: relative;
  background: #FFFFFF;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 26px 50px -24px rgba(5, 13, 36, .65);
}
.balance-card { padding: 22px 20px 18px; }
/* no watermark circles — they made text look noisy and cut */
.balance-card::before, .balance-card::after { display: none; }
/* card footer: This Week never clipped, NGN pill stays inside the card */
.bc-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(46, 123, 255, .15); align-items: center; }
.bc-currency {
  border-radius: 999px; padding: 5px 10px; font-size: 11.5px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.bc-label, .bc-label span { color: #7A8AA8; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.bc-amount { color: #12285A; font-size: clamp(36px, 11vw, 46px); font-weight: 800; line-height: 1.08; }
.bc-sub { color: #7A8AA8; font-size: 12.5px; }
.bc-week small { color: #7A8AA8; }
.bc-week b { color: #12285A; }
.bc-currency { color: #1B5CE6; background: #EAF2FF; border-color: #C9DDFA; }
.bc-actions a { min-height: 50px; font-size: 14px; font-weight: 800; border-radius: 15px; }
.bc-btn-solid { background: #1E5AE8; color: #FFFFFF; box-shadow: 0 10px 20px -11px rgba(27, 92, 230, .75); }
.bc-btn-outline { background: #FFFFFF; border: 2px solid #2E7BFF; color: #1B5CE6; box-shadow: none; }
.eye-btn { color: #7A8AA8; }
.hw-label { color: #7A8AA8; }
.hw-amount { color: #12285A; }
.hw-sub { color: #7A8AA8; }
.hero-wallet .hw-float { background: #2E7BFF; color: #FFFFFF; }

/* ---------- cards: pure white ---------- */
.card, .fs-tile, .earn-card, .task-compact, .task-more-list, .wa-stat {
  background: #FFFFFF;
  border: 1px solid #E8EFF9;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 32, 62, .03), 0 10px 24px -16px rgba(16, 32, 62, .14);
}
.card.flush { border-radius: 20px; }
.row, .mrow { min-height: 66px; padding: 13px 15px; gap: 13px; }
.row:active, .mrow:active, .task-group-row:active { background: #F2F7FF; }
/* 96px bottom padding: the bottom nav can never cover the stats grid */
.app-shell { width: min(100%, 680px); margin-left: auto; margin-right: auto; padding: 0 16px 96px; }
.page { padding-top: 12px; }
.sec-head h2::before { content: ""; display: inline-block; width: 4px; height: 16px; margin-right: 8px; border-radius: 4px; background: #2E7BFF; vertical-align: -2px; }

/* ---------- buttons: bright solid blue ---------- */
.btn { min-height: 50px; padding: 12px 18px; border-radius: 15px; font-size: 15px; font-weight: 800; }
.btn-sm { min-height: 42px; font-size: 13px; }
.btn-primary, .btn-gold, .wa-go {
  background: #1E5AE8;
  color: #FFFFFF; border: 0;
  box-shadow: 0 10px 20px -11px rgba(30, 90, 232, .75);
}
.btn-secondary, .btn-white { background: #FFFFFF; color: #1B5CE6; border: 2px solid #C9DDFF; box-shadow: none; }
.btn-danger { background: #E5484D; color: #FFFFFF; border: 0; }
.btn:active { transform: scale(.975); }
.wa-go { display: inline-grid; place-items: center; min-width: 44px; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.link { color: #1B5CE6; font-weight: 800; }

/* ---------- inputs ---------- */
.inp { min-height: 50px; background: #FFFFFF; color: var(--ink); border: 1.5px solid #D5E1F2; border-radius: 14px; font-size: 16px; }
.inp:focus { border-color: #2E7BFF; box-shadow: var(--ring); }
.field label { color: var(--ink); font-size: 13px; font-weight: 700; }

/* ---------- icons: solid bright blue, very visible ---------- */
.row-ic, .fs-ic, .qa-ic, .svc-ic, .wa-head-ic, .tw-ic { border-radius: 15px; }
.row-ic { width: 46px; height: 46px; }
/* reference color system: each category keeps its own strong color */
.tone-blue   { background: #2563EB; color: #FFFFFF; box-shadow: 0 7px 15px -10px rgba(37, 99, 235, .55); }
.tone-cyan   { background: #0891B2; color: #FFFFFF; box-shadow: 0 7px 15px -10px rgba(8, 145, 178, .55); }
.tone-ok, .tone-green { background: #16A34A; color: #FFFFFF; box-shadow: 0 7px 15px -10px rgba(22, 163, 74, .55); }
.tone-warn, .tone-gold { background: #F59E0B; color: #FFFFFF; box-shadow: 0 7px 15px -10px rgba(245, 158, 11, .55); }
.tone-violet { background: #DB2777; color: #FFFFFF; box-shadow: 0 7px 15px -10px rgba(219, 39, 119, .55); }
.tone-red, .tone-bad { background: #DC2626; color: #FFFFFF; box-shadow: 0 7px 15px -10px rgba(220, 38, 38, .55); }
.tone-muted { background: #E2E8F0; color: #475569; box-shadow: none; }
.wa-head-ic, .tw-ic, .wa-line.next .wa-line-num { background: #1E5AE8; color: #FFFFFF; box-shadow: 0 7px 15px -10px rgba(30, 90, 232, .55); }
.wa-line.done .wa-line-num { background: #0E2A66; color: #FFFFFF; }
.wa-line-num { background: #EAF1FE; color: #1B5CE6; }
.wa-progress { background: #E6EEFA; }
.wa-progress i { background: #2E7BFF; }
.fs-ic { width: 42px; height: 42px; }
.svc-ic { width: 52px; height: 52px; }
.svc span:last-child { color: var(--ink); font-size: 11px; font-weight: 700; }

/* ---------- stats ---------- */
.fresh-stats, .earn-cards { gap: 11px; }
.fs-tile { padding: 14px 12px; }
.fs-ic { background: #E7F0FF; color: #1B5CE6; box-shadow: none; }
.fs-tile b { color: #0E2A66; font-size: 16px; font-weight: 800; }
.fs-tile small { color: var(--ink-faint); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.earn-card { padding: 15px 13px; }
.earn-card b { color: var(--ink); font-size: 15px; }
.earn-card small { color: var(--ink-soft); font-size: 11.5px; }

/* ---------- notes: light, clear, readable ---------- */
.note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 14px;
  font-size: 13.5px; font-weight: 700; line-height: 1.5;
  border: 1px solid transparent;
}
.note::before { display: none; }
.note .ic { width: 30px; height: 30px; padding: 7px; border-radius: 10px; margin: 0; box-sizing: border-box; }
.note b { color: inherit; }
.note-ok { background: #E9F9EF; border-color: #B7E7C9; color: #0C7A3E; }
.note-ok .ic { background: #12A150; color: #FFFFFF; }
.note-danger { background: #FDECEC; border-color: #F5B5B5; color: #B3251F; }
.note-danger .ic { background: #E5484D; color: #FFFFFF; }
.note-warn { background: #FFF6E5; border-color: #F5D9A8; color: #8A5A00; }
.note-warn .ic { background: #E8930C; color: #FFFFFF; }
.note-info { background: #EAF1FE; border-color: #B8D0F7; color: #1B5CE6; }
.note-info .ic { background: #2E7BFF; color: #FFFFFF; }

/* ---------- pills / amounts ---------- */
.pill, .pill-ok, .pill-bad, .pill-warn, .pill-gold, .pill-violet, .pill-blue, .pill-muted {
  background: #EAF1FE; color: #1B5CE6; border: 1px solid #CBDDFA; font-weight: 700;
}
.amt-plus { color: #12A150; font-weight: 800; }
.amt-minus { color: #B3251F; font-weight: 800; }
.tc-reward b { color: #1B5CE6; font-weight: 800; }

/* ---------- watch ads ---------- */
.wa-head h1, .wa-reward-card b, .wa-stat b { color: var(--ink); }
.wa-head small, .wa-stat small { color: var(--ink-faint); }
.wa-video { background: #EAF1FE; border-color: #B8D0F7; color: #1B5CE6; }
.wa-count { color: #1B5CE6; }

/* ---------- bottom nav: white, light-blue active ---------- */
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
.bottom-nav {
  position: sticky; bottom: 0; z-index: 70;
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;
  width: min(100%, 680px); max-width: 680px;
  margin-left: auto; margin-right: auto;
  box-sizing: border-box;
  background: #FFFFFF;
  border-top: 1px solid #E8EFF9;
  box-shadow: 0 -8px 24px -18px rgba(16, 32, 62, .25);
  padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
  transform: none;
}
.bottom-nav.bn-fixed { left: 50%; right: auto; width: min(100%, 680px); transform: translateX(-50%); }
.bn-item { min-height: 54px; border-radius: 15px; color: var(--ink-faint); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px 4px; }
.bn-item span { font-size: 10.5px; font-weight: 800; }
.bn-item.active { background: #E7F0FF; color: #1B5CE6; }
.bn-item:active { transform: scale(.93); }

/* ---------- touch feedback: blue everywhere ---------- */
button, a.btn, .icon-btn, .topbar-btn, .bn-item, .seg-tab, .tab, .chip,
.bc-actions a, .task-group-row, .task-compact, .earn-card, .svc, .qa-item,
.wa-go, .more-row, .plan-opt, .company-option, .ref-copy {
  -webkit-tap-highlight-color: rgba(46, 123, 255, .28);
  transition: background .12s ease, color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #8FB8FF; outline-offset: 3px; }
.btn:active, .icon-btn:active, .topbar-btn:active, .bn-item:active,
.seg-tab:active, .tab:active, .chip:active, .bc-actions a:active,
.task-group-row:active, .task-compact:active, .earn-card:active,
.more-row:active, .plan-opt:active, .company-option:active, .ref-copy:active, .wa-go:active {
  background: #1B5CE6; border-color: #1B5CE6; color: #FFFFFF;
  box-shadow: 0 0 0 4px rgba(143, 184, 255, .35);
  transform: scale(.975);
}
.svc:active .svc-ic, .qa-item:active .qa-ic, .earn-card:active .row-ic { background: #1B5CE6; color: #FFFFFF; }

/* ---------- legacy components share the same light-blue system ---------- */
.logo-word-alt b, .brand-sub-green, .ref-copy, .btn-fund, .btn-white { color: #1B5CE6; }
.ds-ic, .service-ic, .mp-cred, .mp-cred-row, .act-copy, .bubble,
.plan-opt.active, .company-option:has(input:checked), .upload-box.drag, .ref-strip,
.lb-row.me, .mt-violet, .mt-green, .mt-blue, .mt-gold, .mt-pink, .mt-cyan, .mt-red,
.sq-green, .sq-green2, .sq-violet, .sq-pink, .sq-amber, .sq-blue {
  background: #E7F0FF; color: #1B5CE6; border-color: #C9DDFF;
}
.promo-card, .cb-banner { background: linear-gradient(135deg, #4C9CFF, #1B5CE6); color: #FFFFFF; }
.promo-head, .promo-card b, .promo-card p, .cb-banner b, .cb-banner p { color: #FFFFFF; }
.cb-wa { background: #FFFFFF; color: #1B5CE6; }
.community-orb, .community-link, .community-link.telegram, .community-link.whatsapp,
.community-link.free-cta { background: #2E7BFF; color: #FFFFFF; }
.toast, .toast.ok, .toast.err { background: #0E2A66; border-color: #2E7BFF; color: #FFFFFF; }
.lb-chip.c1, .lb-chip.c2, .lb-chip.c3, .lb-rank.r1, .lb-rank.r2, .lb-rank.r3 { background: #E7F0FF; color: #1B5CE6; }
.lb-crown-ic, .lb-pod .pod-crown { color: #2E7BFF; }
.bl-ph.tone-violet, .bl-ph.tone-blue, .bl-ph.tone-gold, .bl-ph.tone-red, .bl-ph.tone-cyan { background: linear-gradient(145deg, #4C9CFF, #1B5CE6); color: #FFFFFF; }
.ku-load-bar { background: linear-gradient(90deg, #4C9CFF, #1B5CE6); }
.eye-btn, .cb-dot, .community-close { border-color: #2E7BFF; color: #1B5CE6; }
.eye-btn:active, .cb-dot:active { transform: scale(.9); }
.task-group-row { min-height: 76px; padding: 13px 16px; }
.task-group-row small { color: var(--ink-soft); font-size: 12px; }
.task-group-row em { color: #1B5CE6; font-weight: 800; }
.task-group-arrow { color: #1B5CE6; font-size: 30px; }
.auth-wrap .btn-primary { min-height: 48px; font-size: 15px; }

/* ---------- dark mode: same family, deep navy ---------- */
html[data-theme="dark"] { background: #0B1526; }
html[data-theme="dark"] body { background: #0B1526; color: #E8EFFC; }
html[data-theme="dark"] .card, html[data-theme="dark"] .fs-tile, html[data-theme="dark"] .earn-card,
html[data-theme="dark"] .task-more-list, html[data-theme="dark"] .wa-stat { background: #12203A; border-color: #22355C; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html[data-theme="dark"] .row-title, html[data-theme="dark"] .tc-title, html[data-theme="dark"] .mrow b { color: #F2F7FF; }
html[data-theme="dark"] .row-sub, html[data-theme="dark"] .tc-meta, html[data-theme="dark"] .hint { color: #AFC4E4; }
html[data-theme="dark"] .inp { background: #0E1B31; border-color: #2C4470; color: #F2F7FF; }
html[data-theme="dark"] .topbar { background: linear-gradient(120deg, #16337F, #12266B); }
html[data-theme="dark"] .bottom-nav { background: #0E1B31; border-color: #22355C; }
html[data-theme="dark"] .balance-card, html[data-theme="dark"] .hero-wallet { background: linear-gradient(135deg, #16337F, #0E2A66); border-color: #2C4470; }
html[data-theme="dark"] .bc-amount { color: #FFFFFF; }
html[data-theme="dark"] .bc-label, html[data-theme="dark"] .bc-label span, html[data-theme="dark"] .bc-sub,
html[data-theme="dark"] .bc-week small { color: #B9D5FF; }
html[data-theme="dark"] body.page-home { background: #0B1526; }
html[data-theme="dark"] body.page-home .page { background: linear-gradient(180deg, #12266B 0, #16337F 130px, #0B1526 260px); }
html[data-theme="dark"] .mt-violet, html[data-theme="dark"] .mt-green, html[data-theme="dark"] .mt-blue,
html[data-theme="dark"] .mt-gold, html[data-theme="dark"] .mt-pink, html[data-theme="dark"] .mt-cyan,
html[data-theme="dark"] .mt-red, html[data-theme="dark"] .bubble, html[data-theme="dark"] .act-copy { background: #16305C; color: #B9D5FF; border-color: #2C4470; }

/* ---------- small phones ---------- */
@media (max-width: 380px) {
  .app-shell { padding-left: 13px; padding-right: 13px; }
  .topbar { width: calc(100% + 26px); margin-left: -13px; margin-right: -13px; padding-left: 13px; padding-right: 13px; }
  .balance-card { padding: 19px 16px 16px; }
  .bc-actions a { font-size: 12.5px; }
  .fs-tile { padding: 12px 9px; }
  .svc-ic { width: 48px; height: 48px; }
}

/* ---------- reference tactic: mini-stats live INSIDE the wallet card ---------- */
body.page-home .balance-card {
  border-radius: 22px 22px 0 0;
}
body.page-home .fresh-stats {
  margin-top: -14px;                       /* cancel page gap → attach to card */
  background: #FFFFFF;
  border-radius: 0 0 22px 22px;
  box-shadow: 0 26px 50px -24px rgba(5, 13, 36, .65);
  padding: 14px 6px 16px;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.page-home .fs-tile {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 6px 4px;
  text-align: center;
}
body.page-home .fs-tile + .fs-tile { border-left: 1px solid #EDF1F8; }
body.page-home .fs-ic {
  margin: 0 auto 6px;
  width: 34px; height: 34px; border-radius: 11px;
  background: #EAF2FF; color: #1B5CE6;
}
body.page-home .fs-ic .ic { width: 17px; height: 17px; }
body.page-home .fs-tile b { display: block; color: #12285A; font-size: 14px; font-weight: 800; }
body.page-home .fs-tile small { display: block; color: #7A8AA8; font-size: 9.5px; }
@media (max-width: 380px) {
  body.page-home .fresh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-home .fs-tile:nth-child(3) { border-left: 0; border-top: 1px solid #EDF1F8; }
  body.page-home .fs-tile:nth-child(4) { border-top: 1px solid #EDF1F8; }
}

/* ---------- structural wallet block: ONE card = balance + stats (reference layout) ---------- */
.wallet-block {
  background: #FFFFFF;
  border-radius: 22px;
  box-shadow: 0 26px 50px -24px rgba(5, 13, 36, .65);
}
.wallet-block .balance-card,
.wallet-block .hero-wallet {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  padding: 22px 20px 12px;
}
.wallet-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 12px 6px 16px; border-top: 1px solid #EDF1F8;
}
.wallet-stats .fs-tile { background: transparent; border: 0; box-shadow: none; padding: 6px 4px; text-align: center; }
.wallet-stats .fs-tile + .fs-tile { border-left: 1px solid #EDF1F8; }
.wallet-stats .fs-ic { margin: 0 auto 6px; width: 34px; height: 34px; border-radius: 11px; background: #EAF2FF; color: #1B5CE6; box-shadow: none; }
.wallet-stats .fs-ic .ic { width: 17px; height: 17px; }
.wallet-stats .fs-tile b { display: block; color: #12285A; font-size: 14px; font-weight: 800; }
.wallet-stats .fs-tile small { display: block; color: #7A8AA8; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 380px) {
  .wallet-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallet-stats .fs-tile:nth-child(3) { border-left: 0; border-top: 1px solid #EDF1F8; }
  .wallet-stats .fs-tile:nth-child(4) { border-top: 1px solid #EDF1F8; }
}

/* greeting like the reference: white hello + soft subtitle + round blue invite button */
.home-greeting { align-items: center; }
.home-greeting .hg-hello { color: #FFFFFF; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.home-greeting b { color: #B9C8E8; font-size: 12.5px; font-weight: 600; display: block; margin-top: 2px; }
.hg-round {
  width: 46px; height: 46px; border-radius: 50%;
  background: #1E5AE8; color: #FFFFFF;
  display: grid; place-items: center;
  box-shadow: 0 10px 20px -10px rgba(9, 18, 45, .8);
  flex: 0 0 auto;
}
.hg-round .ic { width: 21px; height: 21px; }
.hg-round:active { transform: scale(.93); }

html[data-theme="dark"] .wallet-block { background: #12203A; }
html[data-theme="dark"] .wallet-stats { border-top-color: #22355C; }
html[data-theme="dark"] .wallet-stats .fs-tile + .fs-tile { border-left-color: #22355C; }
html[data-theme="dark"] .wallet-stats .fs-ic { background: #16305C; color: #B9D5FF; }

/* ---------- reference stat colors: green / amber / blue / pink soft chips ---------- */
.wallet-stats .fs-tile:nth-child(1) .fs-ic { background: #DCFCE7; color: #16A34A; }
.wallet-stats .fs-tile:nth-child(2) .fs-ic { background: #FEF3C7; color: #B45309; }
.wallet-stats .fs-tile:nth-child(3) .fs-ic { background: #DBEAFE; color: #1D4ED8; }
.wallet-stats .fs-tile:nth-child(4) .fs-ic { background: #FCE7F3; color: #BE185D; }

/* money amounts are green like the reference */
.tc-reward b, .wa-count { color: #16A34A; }
.amt-plus { color: #16A34A; }

/* slate-gray labels */
.row-sub, .tc-meta, .hint { color: #64748B; }

/* active chips = solid reference blue */
.chip.active, .seg-tab.active, .tab.active { color: #1E5AE8; }
html[data-theme="dark"] .wallet-stats .fs-tile:nth-child(1) .fs-ic { background: #11321F; color: #4ADE80; }
html[data-theme="dark"] .wallet-stats .fs-tile:nth-child(2) .fs-ic { background: #38290E; color: #FBBF24; }
html[data-theme="dark"] .wallet-stats .fs-tile:nth-child(3) .fs-ic { background: #16244F; color: #93C5FD; }
html[data-theme="dark"] .wallet-stats .fs-tile:nth-child(4) .fs-ic { background: #3D1630; color: #F9A8D4; }

/* ---------- BIG VIP banner on the Tasks hub ---------- */
.vip-hero {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #7C3AED 0%, #4C1D95 55%, #312E81 100%);
  border-radius: 22px; padding: 20px 18px;
  color: #FFFFFF; text-decoration: none;
  box-shadow: 0 18px 38px -18px rgba(76, 29, 149, .65), inset 0 1px 0 rgba(255,255,255,.18);
  border: 1.5px solid rgba(255, 255, 255, .22);
}
.vip-hero:active { transform: scale(.985); }
.vip-hero-ic {
  width: 58px; height: 58px; flex: 0 0 auto; border-radius: 19px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #FCD34D, #F59E0B);
  color: #3B2700;
  box-shadow: 0 10px 22px -10px rgba(245, 158, 11, .8);
}
.vip-hero-ic .ic { width: 28px; height: 28px; }
.vip-hero-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vip-hero-title {
  font-size: 21px; font-weight: 800; letter-spacing: .02em; color: #FCD34D;
}
.vip-hero-sub { font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.vip-hero-sub b { color: #FCD34D; }
.vip-hero-cta {
  margin-top: 6px; font-size: 12.5px; font-weight: 800; color: #FFFFFF;
  display: inline-flex; align-items: center; gap: 6px;
}
.vip-hero-cta i { font-style: normal; font-size: 17px; line-height: 1; }

/* ---------- bottom nav: 5 items with gold VIP tab ---------- */
.bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bn-item.bn-vip .bn-svg { fill: #B45309; }
.bn-item.bn-vip.active { background: #FEF3C7; color: #B45309; }
.bn-item.bn-vip.active .bn-svg { fill: #B45309; }

/* ---------- one-line compact nav (6 inline items, no More tab) ---------- */
.bottom-nav { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; }
.bn-item { min-height: 52px; border-radius: 13px; padding: 5px 2px 3px; gap: 2px; }
.bn-item span { font-size: 9.5px; font-weight: 800; letter-spacing: 0; }
.bn-item .bn-svg { width: 21px; height: 21px; }

/* ---------- final nav: exactly More · VIP · Tasks · Wallet ---------- */
.bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.bn-item { min-height: 54px; border-radius: 14px; padding: 6px 3px 4px; gap: 3px; }
.bn-item span { font-size: 10.5px; font-weight: 800; }
.bn-item .bn-svg { width: 22px; height: 22px; }

/* ---------- final nav: Home · Tasks · VIP · Wallet · More ---------- */
.bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.bn-item { min-height: 54px; border-radius: 14px; padding: 6px 3px 4px; gap: 3px; }
.bn-item span { font-size: 10px; font-weight: 800; }
.bn-item .bn-svg { width: 21px; height: 21px; }

/* ---------- small small nav: all five tiny, one tight line ---------- */
.bottom-nav {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
}
.bn-item { min-height: 46px; border-radius: 11px; padding: 4px 1px 3px; gap: 1px; }
.bn-item span { font-size: 9px; font-weight: 800; letter-spacing: 0; }
.bn-item .bn-svg { width: 18px; height: 18px; }

/* ---------- original nav restored: Home · Tasks · Wallet · More ---------- */
.bottom-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); }
.bn-item { min-height: 54px; border-radius: 14px; padding: 6px 3px 4px; gap: 3px; }
.bn-item span { font-size: 10.5px; font-weight: 800; }
.bn-item .bn-svg { width: 22px; height: 22px; }