/* =====================================================================
   Bolvah - design system
   ---------------------------------------------------------------------
   One stylesheet for the public site and the member dashboard. Tokens
   first, then primitives, then the two shells. Anything that appears on
   more than one page belongs here rather than in a <style> block.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------- */
:root {
    /* Brand: the navy of the Bolvah mark (--brand-800 is the logo's own
       colour, sampled from the artwork) with the blue of the logo
       animation's glow as the bright accent. Errors stay brick red, which
       can no longer be mistaken for branding. */
    --brand-50:  #EEF3FB;
    --brand-100: #DCE6F7;
    --brand-300: #8FAEE3;
    --brand-500: #2F6FE4;   /* the glow: focus rings, active states */
    --brand-600: #123F86;   /* primary. 10:1 with white text */
    --brand-700: #0C2F66;
    --brand-800: #08244A;   /* the logo */
    --plum-700:  #7B1E58;   /* a second accent, for category tiles only */
    --cream:     #FEFDF9;   /* the ground the logo is drawn on */

    /* Teal stays: money in, and a warm-ish complement to all the blue. */
    --teal-400:   #2BE0B8;
    --teal-500:   #00D1A0;
    --teal-600:   #00A57F;

    --ink:        #141728;
    --ink-soft:   #2C3050;
    --muted:      #6B7191;
    --muted-soft: #9BA0BC;
    --line:       #E6E8F2;
    --line-soft:  #F0F1F8;
    --bg:         #F4F5FB;
    --card:       #FFFFFF;

    --success:    #12A150;
    --success-bg: #E8F7EE;
    --warning:    #B76E00;
    --warning-bg: #FDF3E2;
    /* Brick, not rose: a browner, darker red so an error never reads as
       just more branding. */
    --danger:     #B42318;
    --danger-bg:  #FEF3F2;
    --info:       #2563EB;
    --info-bg:    #E8F0FE;

    --grad: linear-gradient(135deg, #2A66D6 0%, #123F86 38%, #08244A 115%);
    --grad-soft: linear-gradient(135deg, #1B4FA8 0%, #08244A 100%);

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 18px;
    --r-xl: 26px;
    --r-pill: 999px;

    --sh-sm: 0 1px 2px rgba(20, 23, 40, .06);
    --sh-md: 0 4px 16px rgba(20, 23, 40, .07);
    --sh-lg: 0 18px 48px rgba(20, 23, 40, .10);
    --sh-glow: 0 18px 44px rgba(18, 63, 134, .30);

    --font: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --sidebar-w: 250px;
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; font-weight: 700; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); }
h3 { font-size: 1.18rem; }
h4 { font-size: 1rem; }
p  { margin: 0 0 1rem; }

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { max-width: 100%; }
svg.ico { width: 20px; height: 20px; flex: none; }
svg.ico-sm { width: 16px; height: 16px; }
svg.ico-lg { width: 26px; height: 26px; }

hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

::selection { background: var(--brand-100); }

:focus-visible { outline: 3px solid rgba(47, 111, 228, .45); outline-offset: 2px; border-radius: 4px; }

.container { width: min(1160px, 100% - 40px); margin-inline: auto; }
.container-narrow { width: min(760px, 100% - 40px); margin-inline: auto; }

.muted { color: var(--muted); }
.small { font-size: .85rem; }
.tiny  { font-size: .76rem; }
.strong { font-weight: 700; }
.center { text-align: center; }
.right  { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; }
.hide { display: none !important; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2.25rem; }
.mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.gradient-text {
    background: var(--grad-soft);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--brand-600);
    --btn-fg: #fff;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .72rem 1.35rem;
    font: inherit; font-weight: 650; font-size: .93rem;
    color: var(--btn-fg); background: var(--btn-bg);
    border: 1px solid transparent; border-radius: var(--r-pill);
    cursor: pointer; text-decoration: none;
    transition: transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-primary { background: var(--grad-soft); box-shadow: var(--sh-glow); }
.btn-primary:hover { box-shadow: 0 22px 50px rgba(18, 63, 134, .36); }
.btn-dark    { background: var(--ink); }
.btn-teal    { background: var(--teal-600); }
.btn-ghost   { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: #fff; }
.btn-white   { background: #fff; color: var(--brand-700); }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.btn-outline-white:hover { background: rgba(255,255,255,.12); box-shadow: none; }
.btn-danger  { background: var(--danger); }
.btn-sm  { padding: .48rem .95rem; font-size: .84rem; }
.btn-lg  { padding: .95rem 1.9rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ---------------------------------------------------------------------
   Surfaces
   --------------------------------------------------------------------- */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    box-shadow: var(--sh-sm);
}
.card-flush { padding: 0; overflow: hidden; }
.card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.15rem 1.5rem; border-bottom: 1px solid var(--line);
}
.card-head h3 { margin: 0; font-size: 1.02rem; }
.card-body { padding: 1.5rem; }
.card-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--brand-100); }

.grid { display: grid; gap: 1.15rem; }
/* Grid items default to min-width:auto, so a child with a wide minimum (the
   casino wheel, a long unbroken reference string) pushes its track wider
   than the screen instead of shrinking. Letting them shrink is what keeps
   phones from scrolling sideways. */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.row { display: flex; gap: 1rem; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.row-center { display: flex; align-items: center; gap: .6rem; }
.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---------------------------------------------------------------------
   Badges, pills, alerts
   --------------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .28rem .7rem; border-radius: var(--r-pill);
    font-size: .74rem; font-weight: 700; letter-spacing: .02em;
    background: var(--line-soft); color: var(--muted);
    /* A badge whose label wraps stops looking like a pill and starts looking
       like a blob. The heading beside it is the flexible one, so it shrinks. */
    white-space: nowrap;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger); }
.badge-info    { background: var(--info-bg);    color: var(--info); }
.badge-brand  { background: var(--brand-50);  color: var(--brand-600); }

.pill {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .9rem; border-radius: var(--r-pill);
    background: rgba(20,23,40,.26); border: 1px solid rgba(255,255,255,.28);
    color: #fff; font-size: .8rem; font-weight: 600;
}

.alert {
    padding: .9rem 1.1rem; border-radius: var(--r-md);
    border: 1px solid transparent; margin-bottom: 1rem; font-size: .9rem;
}
.alert-success { background: var(--success-bg); border-color: #BFE7CE; color: #0B6B36; }
.alert-error   { background: var(--danger-bg);  border-color: #F5C6C6; color: #9B2222; }
.alert-warning { background: var(--warning-bg); border-color: #F0DCB4; color: #8A5300; }
.alert-info    { background: var(--info-bg);    border-color: #C6D8FB; color: #1D4ED8; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.field { margin-bottom: 1.05rem; }
.field label, .label {
    display: block; margin-bottom: .38rem;
    font-size: .84rem; font-weight: 650; color: var(--ink-soft);
}
.input, .select, .textarea {
    width: 100%; padding: .74rem .9rem;
    font: inherit; font-size: .93rem; color: var(--ink);
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--brand-500);
    box-shadow: 0 0 0 4px rgba(47, 111, 228, .18);
}
.input::placeholder { color: var(--muted-soft); }
.textarea { resize: vertical; min-height: 96px; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7191' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.4rem; }
.hint { margin-top: .35rem; font-size: .78rem; color: var(--muted); }
.error-text { margin-top: .35rem; font-size: .78rem; color: var(--danger); font-weight: 600; }
.input.has-error { border-color: var(--danger); }

.input-group { display: flex; }
.input-group .addon {
    display: inline-flex; align-items: center; padding: 0 .85rem;
    background: var(--line-soft); border: 1px solid var(--line); border-right: 0;
    border-radius: var(--r-md) 0 0 var(--r-md);
    font-size: .9rem; font-weight: 600; color: var(--muted);
}
.input-group .input { border-radius: 0 var(--r-md) var(--r-md) 0; }

.check { display: flex; align-items: flex-start; gap: .6rem; font-size: .86rem; color: var(--ink-soft); }
.check input { margin-top: .22rem; width: 16px; height: 16px; accent-color: var(--brand-600); }

/* ---------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th {
    text-align: left; padding: .8rem 1rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); background: var(--line-soft); white-space: nowrap;
}
.table td { padding: .85rem 1rem; border-top: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:hover { background: #FBFBFE; }
.table .amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.amount-credit { color: var(--success); }
.amount-debit  { color: var(--danger); }

.empty {
    padding: 3rem 1.5rem; text-align: center; color: var(--muted);
}
.empty svg { width: 42px; height: 42px; color: var(--muted-soft); margin-bottom: .6rem; }

/* =====================================================================
   PUBLIC SITE
   ===================================================================== */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.86); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.site-header .inner { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem; color: var(--ink); letter-spacing: -.02em; }
.brand:hover { text-decoration: none; }
.brand .brand-mark { width: 32px; height: 32px; flex: none; }
.brand .brand-word { height: 21px; width: auto; flex: none; }
.sidebar .brand .brand-mark { width: 30px; height: 30px; }
.sidebar .brand .brand-word { height: 19px; }
.sidebar .brand .badge { margin-left: .1rem; }
.auth-side .brand .brand-mark { width: 36px; height: 36px; }
.auth-side .brand .brand-word { height: 24px; }
.site-nav { display: flex; gap: 1.6rem; margin-left: 1rem; }
.site-nav a { color: var(--ink-soft); font-size: .9rem; font-weight: 600; }
.site-nav a:hover { color: var(--brand-600); text-decoration: none; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.nav-toggle { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; color: var(--ink); }

/* Hero */
.hero { padding: 1.6rem 0 0; }
.hero-card {
    position: relative; overflow: hidden;
    background: var(--grad); border-radius: var(--r-xl);
    padding: clamp(2.2rem, 5vw, 4rem);
    color: #fff;
}
.hero-card::after {
    content: ""; position: absolute; right: -80px; top: -60px;
    width: 420px; height: 420px; border-radius: 50%;
    background: rgba(255,255,255,.10);
}
.hero-card::before {
    content: ""; position: absolute; right: 120px; bottom: -160px;
    width: 300px; height: 300px; border-radius: 50%;
    background: rgba(255,255,255,.07);
}
.hero-inner { position: relative; z-index: 1; max-width: 700px; }

/* The animated logo. It is drawn on cream, so it sits on a cream card of
   exactly that colour and the edges of the video disappear into it. The
   video is portrait with wide margins; the card crops to the logo. */
.hero-card.has-brand { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; align-items: center; }
.hero-brand {
    position: relative; z-index: 1; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden;
    background: var(--cream); box-shadow: 0 24px 60px rgba(4, 18, 40, .45);
}
.hero-brand video, .hero-brand img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
@media (max-width: 980px) {
    .hero-card.has-brand { grid-template-columns: 1fr; gap: 1.6rem; }
    /* A wide, short card on a phone. Cropping to the width would cut the
       top off the B, so the video is sized by height instead and centred;
       the card's own cream fills what is left either side. */
    .hero-brand { order: -1; aspect-ratio: auto; height: 210px; }
    .hero-brand video, .hero-brand img {
        position: absolute; left: 50%; top: 50%; width: auto; height: 178%;
        transform: translate(-50%, -49%); object-fit: contain;
    }
}
.hero h1 { color: #fff; margin-bottom: 1rem; }
.hero-sub { font-size: 1.05rem; color: rgba(255,255,255,.95); max-width: 560px; margin-bottom: 1.8rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.4rem; font-size: .84rem; color: rgba(255,255,255,.93); }
.hero-trust span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-trust svg { width: 17px; height: 17px; }

.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-head { max-width: 640px; margin: 0 auto 2.75rem; text-align: center; }
.section-head p { color: var(--muted); font-size: 1.02rem; margin: 0; }
.eyebrow {
    display: inline-block; margin-bottom: .8rem;
    font-size: .76rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand-600);
}

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; text-align: center; }
.step-num {
    width: 52px; height: 52px; margin: 0 auto 1rem;
    display: grid; place-items: center; border-radius: 50%;
    font-size: 1.15rem; font-weight: 800; color: #fff;
}
.step:nth-child(1) .step-num { background: linear-gradient(135deg, #3B7BF0, #123F86); }
.step:nth-child(2) .step-num { background: linear-gradient(135deg, #B24A8C, #7B1E58); }
.step:nth-child(3) .step-num { background: linear-gradient(135deg, #2BE0B8, #00A57F); }
.step h3 { margin-bottom: .4rem; }
.step p { color: var(--muted); font-size: .92rem; margin: 0; }

/* Feature grid */
.feature { padding: 1.65rem; }
.feature-icon {
    width: 46px; height: 46px; border-radius: 14px;
    display: grid; place-items: center; margin-bottom: 1rem;
    background: var(--brand-50); color: var(--brand-600);
}
.feature-icon svg { width: 23px; height: 23px; }
.feature h3 { font-size: 1.04rem; margin-bottom: .35rem; }
.feature p { color: var(--muted); font-size: .9rem; margin: 0; }
.feature:nth-child(2) .feature-icon { background: #E6FBF4; color: var(--teal-600); }
.feature:nth-child(3) .feature-icon { background: #F6EAF6; color: #7B1E58; }
.feature:nth-child(4) .feature-icon { background: #E8F0FE; color: var(--info); }
.feature:nth-child(5) .feature-icon { background: #FDF3E2; color: #B76E00; }
.feature:nth-child(6) .feature-icon { background: #EEF6E7; color: #55892B; }

/* Trust band */
.trust-band { background: var(--ink); color: #fff; border-radius: var(--r-xl); padding: clamp(2rem, 5vw, 3.2rem); }
.trust-band h2 { color: #fff; }
.trust-band > .container-narrow > p { color: rgba(255,255,255,.72); }
.trust-item { display: flex; gap: .9rem; align-items: flex-start; }
.trust-item .tick {
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    display: grid; place-items: center;
    background: rgba(43, 224, 184, .16); color: var(--teal-400);
}
.trust-item h4 { margin: 0 0 .2rem; color: #fff; font-size: .97rem; }
.trust-item p { margin: 0; font-size: .87rem; color: rgba(255,255,255,.66); }

/* Stats strip */
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center; }
.stat-big { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; }
.stat-label { font-size: .8rem; color: var(--muted); }

/* FAQ */
.faq details {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 1.05rem 1.25rem; margin-bottom: .7rem;
}
.faq details[open] { border-color: var(--brand-300); box-shadow: var(--sh-sm); }
.faq summary {
    cursor: pointer; font-weight: 650; font-size: .96rem;
    list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--muted); line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: .75rem 0 0; color: var(--muted); font-size: .91rem; }

/* Final CTA */
.cta-card {
    background: var(--grad-soft); border-radius: var(--r-xl);
    padding: clamp(2.2rem, 5vw, 3.4rem); text-align: center; color: #fff;
}
.cta-card h2 { color: #fff; }
.cta-card p { color: rgba(255,255,255,.93); max-width: 520px; margin: 0 auto 1.6rem; }

/* Footer */
.site-footer { background: #fff; border-top: 1px solid var(--line); padding: 3rem 0 2rem; margin-top: 3rem; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
.footer-grid h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .8rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .45rem; }
.footer-grid a { color: var(--ink-soft); font-size: .88rem; }
.footer-bottom {
    margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    font-size: .82rem; color: var(--muted);
}

/* Auth pages */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-side {
    background: var(--grad); color: #fff; padding: 3rem;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative; overflow: hidden;
}
.auth-side::after {
    content: ""; position: absolute; right: -120px; bottom: -120px;
    width: 380px; height: 380px; border-radius: 50%; background: rgba(255,255,255,.09);
}
.auth-side h2 { color: #fff; font-size: 1.9rem; }
.auth-side p { color: rgba(255,255,255,.85); }
.auth-side .pill-list { display: grid; gap: .7rem; position: relative; z-index: 1; }
.auth-main { display: grid; place-items: center; padding: 2.5rem 1.5rem; }
.auth-card { width: min(430px, 100%); }
.auth-card h1 { font-size: 1.7rem; margin-bottom: .3rem; }

/* =====================================================================
   DASHBOARD
   ===================================================================== */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
    background: #fff; border-right: 1px solid var(--line);
    padding: 1.25rem 0; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column;
}
.sidebar .brand { padding: 0 1.35rem 1.25rem; }
.side-group { padding: 0 .8rem; margin-bottom: 1.1rem; }
.side-label {
    padding: 0 .55rem; margin-bottom: .4rem;
    font-size: .68rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--muted-soft);
}
.side-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .58rem .55rem; border-radius: var(--r-md);
    color: var(--ink-soft); font-size: .89rem; font-weight: 600;
}
.side-link:hover { background: var(--line-soft); text-decoration: none; }
.side-link.active { background: var(--brand-50); color: var(--brand-600); }
.side-link svg { color: var(--muted); }
.side-link.active svg { color: var(--brand-600); }
.side-link .tag { margin-left: auto; }
.sidebar-foot { margin-top: auto; padding: 1rem .8rem 0; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 30;
    background: rgba(244,245,251,.9); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    padding: .9rem 1.6rem; display: flex; align-items: center; gap: 1rem;
}
.topbar h1 { font-size: 1.15rem; margin: 0; }
.topbar .sub { font-size: .8rem; color: var(--muted); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .7rem; }
.page { padding: 1.6rem; flex: 1; }
/* Centred rather than left-aligned: on a wide monitor the main column is
   far wider than 1180px, and hugging the sidebar looks broken. */
.page > .container-fluid { max-width: 1180px; margin-inline: auto; }

.avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; flex: none;
    background: var(--grad-soft); color: #fff; font-size: .8rem; font-weight: 700;
}
.avatar-lg { width: 56px; height: 56px; font-size: 1.05rem; }

.icon-btn {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; position: relative;
    background: #fff; border: 1px solid var(--line); color: var(--ink-soft); cursor: pointer;
}
.icon-btn:hover { border-color: var(--brand-300); text-decoration: none; }
.icon-btn .dot {
    position: absolute; top: 7px; right: 8px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid #fff;
}

/* Balance cards */
.balance-card {
    background: var(--grad); color: #fff; border-radius: var(--r-lg);
    padding: 1.4rem 1.5rem; position: relative; overflow: hidden;
}
.balance-card::after {
    content: ""; position: absolute; right: -50px; top: -50px;
    width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.10);
}
.balance-card .label { font-size: .78rem; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.balance-card .value { font-size: 1.85rem; font-weight: 800; letter-spacing: -.02em; margin: .25rem 0 .1rem; position: relative; z-index: 1; }
.balance-card .meta { font-size: .8rem; color: rgba(255,255,255,.78); position: relative; z-index: 1; }

.stat-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem 1.35rem; }
.stat-card .label { font-size: .78rem; color: var(--muted); font-weight: 650; }
.stat-card .value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-top: .2rem; }
.stat-card .delta { font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.stat-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); }

/* Task cards */
.task-card {
    display: flex; gap: 1rem; align-items: center;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.25rem;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.task-card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: var(--brand-100); text-decoration: none; }
.task-card .t-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); flex: none; }
.task-card .t-body { min-width: 0; flex: 1; }
.task-card h4 { margin: 0 0 .12rem; font-size: .96rem; color: var(--ink); }
.task-card p { margin: 0; font-size: .82rem; color: var(--muted); }
.task-card .t-reward { text-align: right; flex: none; }
.task-card .t-reward .amt { font-weight: 800; color: var(--teal-600); font-size: .98rem; white-space: nowrap; }
.task-card.is-done { opacity: .62; }
.task-card.is-done .t-icon { background: var(--line-soft); color: var(--muted); }

.progress { height: 6px; background: var(--line-soft); border-radius: var(--r-pill); overflow: hidden; margin-top: .5rem; }
.progress span { display: block; height: 100%; background: var(--grad-soft); border-radius: var(--r-pill); transition: width .4s ease; }

/* Bar chart */
.chart { display: flex; align-items: flex-end; gap: .55rem; height: 150px; padding-top: .5rem; }
.chart .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .4rem; height: 100%; }
.chart .bar i {
    display: block; width: 100%; border-radius: 6px 6px 2px 2px;
    background: var(--grad-soft); min-height: 3px; transition: height .5s ease;
}
.chart .bar.is-empty i { background: var(--line); }
.chart .bar b { font-size: .68rem; color: var(--muted); font-weight: 600; }

/* Games */
/* The per-attempt rewrite replaced the old HUD strip, fixed-height board
   and roaming tap target. What is left below is what the games still use. */
.quiz-options { display: grid; gap: .65rem; width: min(440px, 100%); }
.quiz-opt {
    text-align: left; padding: .85rem 1.1rem; border-radius: var(--r-md);
    border: 1px solid var(--line); background: #fff; font: inherit; font-weight: 600; cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.quiz-opt:hover { border-color: var(--brand-500); background: var(--brand-50); }
.quiz-opt.correct { border-color: var(--success); background: var(--success-bg); }
.quiz-opt.wrong { border-color: var(--danger); background: var(--danger-bg); }

/* Wheel */
/* Bounded by its container, not by the viewport: 86vw ignored the page and
   card padding either side, which made the wheel wider than the space it
   had to sit in. */
.wheel-wrap { position: relative; width: min(320px, 100%); margin: 0 auto; }
.wheel {
    width: 100%; aspect-ratio: 1; border-radius: 50%;
    border: 8px solid #fff; box-shadow: var(--sh-lg);
    transition: transform 4.2s cubic-bezier(.17, .67, .16, 1);
}
.wheel-pin {
    position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
    width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent;
    border-top: 24px solid var(--ink); z-index: 2;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.2));
}

/* Chat */
.chat-shell { display: grid; grid-template-columns: 230px 1fr; height: calc(100vh - 190px); min-height: 460px; }
.chat-rooms { border-right: 1px solid var(--line); overflow-y: auto; padding: .8rem; }
.chat-room {
    display: block; padding: .65rem .8rem; border-radius: var(--r-md);
    color: var(--ink-soft); font-size: .88rem; font-weight: 650;
}
.chat-room:hover { background: var(--line-soft); text-decoration: none; }
.chat-room.active { background: var(--brand-50); color: var(--brand-600); }
.chat-room small { display: block; font-weight: 500; color: var(--muted); font-size: .76rem; }
.chat-main { display: flex; flex-direction: column; min-width: 0; }
.chat-log { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .85rem; }
.msg { display: flex; gap: .65rem; max-width: 78%; }
.msg .bubble {
    background: #fff; border: 1px solid var(--line); border-radius: 4px 14px 14px 14px;
    padding: .6rem .85rem; font-size: .89rem;
}
.msg .who { font-size: .74rem; font-weight: 700; color: var(--brand-600); margin-bottom: .1rem; }
.msg .when { font-size: .68rem; color: var(--muted-soft); margin-top: .2rem; }
.msg.mine { margin-left: auto; flex-direction: row-reverse; }
.msg.mine .bubble { background: var(--grad-soft); color: #fff; border-color: transparent; border-radius: 14px 4px 14px 14px; }
.msg.mine .who { color: rgba(255,255,255,.85); }
.msg.mine .when { color: rgba(255,255,255,.7); }
.chat-form { display: flex; gap: .6rem; padding: .9rem 1.1rem; border-top: 1px solid var(--line); background: #fff; }

/* Media tiles */
.media-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.media-thumb {
    position: relative; aspect-ratio: 16 / 9; background: var(--ink);
    display: grid; place-items: center; color: #fff;
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-thumb .play {
    position: absolute; inset: 0; display: grid; place-items: center;
    background: rgba(20,23,40,.35);
}
.media-thumb .play span {
    width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.92);
    display: grid; place-items: center; color: var(--ink);
}
.media-tile .media-body { padding: .95rem 1.1rem; }
.media-tile h4 { font-size: .92rem; margin: 0 0 .3rem; }
.tile-vertical .media-thumb { aspect-ratio: 9 / 16; }

.ad-tile { border-left: 4px solid var(--brand-500); }
.ad-visual {
    aspect-ratio: 16 / 7; background: var(--grad-soft); color: #fff;
    display: grid; place-items: center; font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em;
}

/* Modal */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(20,23,40,.55);
    display: grid; place-items: center; padding: 1.25rem; z-index: 100;
}
.modal {
    background: #fff; border-radius: var(--r-lg); width: min(560px, 100%);
    max-height: 92vh; overflow: auto; box-shadow: var(--sh-lg);
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.35rem; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 1.05rem; }
.modal-body { padding: 1.35rem; }
.modal-foot { padding: 1rem 1.35rem; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: .6rem; }
.modal-close { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; }

/* Toasts */
.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: grid; gap: .6rem; }
.toast {
    background: var(--ink); color: #fff; padding: .8rem 1.1rem; border-radius: var(--r-md);
    font-size: .87rem; font-weight: 600; box-shadow: var(--sh-lg);
    display: flex; align-items: center; gap: .55rem;
    animation: toast-in .28s ease;
}
.toast.win { background: linear-gradient(135deg, #0FA968, #0B7A4B); }
.toast.err { background: linear-gradient(135deg, #E14D4D, #B02525); }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Locked state */
.locked-banner {
    display: flex; gap: 1rem; align-items: center;
    background: var(--warning-bg); border: 1px solid #F0DCB4; border-radius: var(--r-lg);
    padding: 1.15rem 1.35rem; margin-bottom: 1.5rem;
}
.locked-banner svg { color: var(--warning); flex: none; }
.locked-banner h4 { margin: 0 0 .15rem; color: #8A5300; }
.locked-banner p { margin: 0; font-size: .87rem; color: #8A5300; }
.locked-banner .btn { margin-left: auto; }

/* Countdown ring */
.ring { --pct: 0; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--brand-600) calc(var(--pct) * 1%), var(--line) 0);
    font-size: .78rem; font-weight: 800; }
.ring i { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-style: normal; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-side { display: none; }
}

@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 90;
        transform: translateX(-100%); transition: transform .24s ease;
        box-shadow: var(--sh-lg);
    }
    .sidebar.open { transform: none; }
    .sidebar-scrim { position: fixed; inset: 0; background: rgba(20,23,40,.45); z-index: 80; }
    .nav-toggle { display: inline-flex; }
    .chat-shell { grid-template-columns: 1fr; height: auto; }
    .chat-rooms { display: flex; gap: .5rem; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .chat-room { white-space: nowrap; }
    .chat-log { height: 52vh; }
}

@media (max-width: 600px) {
    /* Badges no longer wrap their own text, so a row of them has a hard
       minimum width. Letting the row itself wrap is what absorbs that on a
       narrow screen. Only kicks in when the content genuinely does not fit. */
    .row-between { flex-wrap: wrap; }

    /* Three elements on one row leaves the message a three-words-per-line
       column on a phone. The button wraps to its own full-width row and the
       text gets the space back. */
    .locked-banner { flex-wrap: wrap; }
    .locked-banner .btn { flex: 1 0 100%; margin-left: 0; justify-content: center; }
}

@media (max-width: 640px) {
    /* 16px exactly. iOS Safari zooms the whole page in when you focus an
       input whose font is smaller than this, and it does not zoom back out
       afterwards - which on a platform where people are constantly typing
       phone numbers and amounts leaves them stranded mid-form. */
    .input, .select, .textarea { font-size: 16px; }

    /* The topbar is the one row that cannot wrap gracefully, so the balance
       readout steps aside: the main wallet card below repeats it anyway. */
    .topbar { gap: .55rem; }
    .topbar > div { min-width: 0; }
    .topbar h1 { font-size: 1.02rem; }
    .topbar .sub { display: none; }
    .topbar-balance { display: none; }
    .topbar-actions { gap: .45rem; }
}

@media (max-width: 340px) {
    /* Below any real phone width, but browser text-zoom lands here. The
       header is the one row with two buttons and a wordmark competing. */
    .site-header .inner { gap: .6rem; }
    .brand span { display: none; }
    .header-actions { gap: .4rem; }
    .header-actions .btn { padding: .48rem .8rem; }
}

@media (max-width: 480px) {
    /* On a 360-375px phone, 1.5rem of card padding either side costs 48px of
       a ~340px content column. Buying that back matters more than the
       roominess does at this size. */
    .card { padding: 1.15rem; }
    .card-head, .card-body { padding-left: 1.15rem; padding-right: 1.15rem; }
    .page { padding: .9rem; }
    /* Comfortably tappable without hunting for a 16px box. */
    .check input { width: 20px; height: 20px; }
}

@media (max-width: 720px) {
    .site-nav { display: none; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; gap: 2.25rem; }
    .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .footer-grid { grid-template-columns: 1fr; }
    .page { padding: 1.1rem; }
    .topbar { padding: .8rem 1.1rem; }
    .hero-actions .btn { width: 100%; }
    .msg { max-width: 90%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   DASHBOARD READOUT CARDS
   ---------------------------------------------------------------------
   The stacked, colour-coded balance cards. Colour-coding earns its place:
   on a page with eight numbers on it, hue is how you find the one you came
   for. Every gradient's lightest stop clears 4.5:1 against white, because
   the small uppercase label on these cards is normal-size text.
   ===================================================================== */
.money-card {
    position: relative; overflow: hidden;
    border-radius: var(--r-lg); padding: 1.15rem 1.25rem;
    color: #fff; background: var(--grad-soft);
}
.money-card::after {
    content: ""; position: absolute; right: -42px; top: -52px;
    width: 168px; height: 168px; border-radius: 50%;
    background: rgba(255, 255, 255, .10);
}
.money-card > * { position: relative; z-index: 1; }
.money-card .chip {
    width: 34px; height: 34px; border-radius: 10px; margin-bottom: .75rem;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .16);
}
.money-card .chip svg { width: 17px; height: 17px; }
.money-card .label {
    font-size: .71rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: rgba(255, 255, 255, .88);
}
.money-card .value { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin-top: .1rem; }
.money-card .sub { font-size: .76rem; color: rgba(255, 255, 255, .82); margin-top: .15rem; }

.money-card.is-main  { background: var(--grad); }
.money-card.is-ink   { background: linear-gradient(135deg, #2C3050, #141728); }
.money-card.is-teal  { background: linear-gradient(135deg, #07805F, #045240); }
.money-card.is-plum  { background: linear-gradient(135deg, #8E2E72, #521540); }
.money-card.is-amber { background: linear-gradient(135deg, #A26600, #6E4400); }
.money-card.is-brick { background: linear-gradient(135deg, #B0331F, #741E10); }
.money-card.is-slate { background: linear-gradient(135deg, #666E85, #434A5D); }

/* Lifetime profit, with what the platform took sitting underneath it. */
.profit-card {
    background: linear-gradient(160deg, #1B1F33, #0E1120);
    border-radius: var(--r-lg); padding: 1.3rem 1.35rem; color: #fff;
}
.profit-card .label { font-size: .71rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.profit-card .value { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; margin-top: .15rem; }
.profit-card .split { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.12); }
.profit-card .out-label { color: rgba(255,255,255,.55); font-size: .71rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.profit-card .out-value { color: #FF9DA6; font-weight: 700; }

/* ---------------------------------------------------------------------
   Panels: a card with a titled head, optionally a gradient banner
   --------------------------------------------------------------------- */
.panel-head {
    display: flex; align-items: center; gap: .7rem;
    padding: 1.05rem 1.25rem; border-bottom: 1px solid var(--line);
}
.panel-head h3 { margin: 0; font-size: 1.02rem; }
.panel-head .sub { font-size: .78rem; color: var(--muted); }
.panel-icon {
    width: 34px; height: 34px; border-radius: 10px; flex: none;
    display: grid; place-items: center;
    background: var(--brand-50); color: var(--brand-600);
}
.panel-icon svg { width: 17px; height: 17px; }
.panel-icon.is-teal  { background: #E6FBF4; color: var(--teal-600); }
.panel-icon.is-plum  { background: #F6EAF6; color: #7B1E58; }
.panel-icon.is-amber { background: var(--warning-bg); color: var(--warning); }
.panel-icon.is-info  { background: var(--info-bg); color: var(--info); }

.panel-head.is-banner {
    background: var(--grad); border-bottom: 0; color: #fff;
}
.panel-head.is-banner h3 { color: #fff; }
.panel-head.is-banner .sub { color: rgba(255,255,255,.85); }
.panel-head.is-banner .panel-icon { background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.18); }

/* ---------------------------------------------------------------------
   Per-activity earnings grid
   --------------------------------------------------------------------- */
.earn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: 1.1rem 1.25rem; }
.earn-tile {
    display: flex; align-items: center; gap: .65rem;
    border: 1px solid var(--line); border-radius: var(--r-md); padding: .7rem .8rem;
    background: #fff; color: var(--ink);
}
.earn-tile:hover { border-color: var(--brand-300); text-decoration: none; }
.earn-tile .ei { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-600); }
.earn-tile .ei svg { width: 16px; height: 16px; }
.earn-tile .en { font-size: .75rem; color: var(--muted); line-height: 1.25; }
.earn-tile .ev { font-weight: 800; font-size: .92rem; letter-spacing: -.01em; }
.earn-tile.is-total { grid-column: 1 / -1; background: var(--brand-50); border-color: var(--brand-100); }

/* Give the tiles a spread of hues so the grid scans like the cards do. */
.earn-tile:nth-child(6n+2) .ei { background: #E6FBF4; color: var(--teal-600); }
.earn-tile:nth-child(6n+3) .ei { background: #F6EAF6; color: #7B1E58; }
.earn-tile:nth-child(6n+4) .ei { background: var(--info-bg); color: var(--info); }
.earn-tile:nth-child(6n+5) .ei { background: var(--warning-bg); color: var(--warning); }
.earn-tile:nth-child(6n+6) .ei { background: #EEF6E7; color: #55892B; }

/* ---------------------------------------------------------------------
   Downline levels
   --------------------------------------------------------------------- */
.level-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; padding: 1.1rem 1.25rem; }
.level-tile { border-radius: var(--r-md); padding: .85rem .7rem; color: #fff; text-align: center; }
.level-tile .n { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.level-tile .l { font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.level-tile .d { font-size: .68rem; color: rgba(255,255,255,.8); margin-top: .2rem; }
.level-tile:nth-child(1) { background: linear-gradient(135deg, #1B4FA8, #08244A); }
.level-tile:nth-child(2) { background: linear-gradient(135deg, #8E2E72, #521540); }
.level-tile:nth-child(3) { background: linear-gradient(135deg, #666E85, #434A5D); }

/* ---------------------------------------------------------------------
   Task timetable
   --------------------------------------------------------------------- */
.timetable td, .timetable th { padding: .6rem .75rem; }
.timetable .t-name { font-weight: 650; }
.timetable .t-today { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The schedule column is the widest thing in the timetable and the first to
   push it past the card on a phone. Below 560px it says "Daily" not
   "Every day", which is the difference between fitting and not. */
.narrow-only { display: none; }

.badge-tier {
    display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.25rem;
}
.badge-tier .medal {
    width: 46px; height: 46px; border-radius: 50%; flex: none;
    display: grid; place-items: center; color: #fff;
}
.badge-tier .tier-name { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; }

@media (max-width: 560px) {
    /* The breakdown stays two-up on a phone, as the reference does: ten
       single-file rows would push everything below it off the screen. */
    .earn-grid { padding: 1rem; gap: .55rem; }
    .earn-tile { padding: .6rem .65rem; gap: .5rem; }
    .earn-tile .ei { width: 28px; height: 28px; border-radius: 8px; }
    .earn-tile .ei svg { width: 14px; height: 14px; }
    .earn-tile .en { font-size: .7rem; }
    .earn-tile .ev { font-size: .82rem; }
    .money-card .value { font-size: 1.35rem; }

    /* Drop the "Pays" column rather than make the timetable scroll sideways
       inside its card; the reward is on the tasks page beside the button. */
    .timetable th:nth-child(5), .timetable td:nth-child(5) { display: none; }
    .wide-only { display: none; }
    .narrow-only { display: inline; }
    .timetable th, .timetable td { padding: .55rem .5rem; }
}

@media (max-width: 340px) {
    .earn-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   TASK ROWS
   ---------------------------------------------------------------------
   The tasks page in the same idiom as the dashboard: panels with a
   coloured head, and rows separated by a hairline rather than each one
   being its own floating card.
   ===================================================================== */
.task-row {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    padding: 1rem 1.25rem; border-top: 1px solid var(--line-soft);
}
.task-row:first-child { border-top: 0; }
.task-row .tr-icon {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    display: grid; place-items: center;
    background: var(--brand-50); color: var(--brand-600);
}
.task-row .tr-body { flex: 1 1 190px; min-width: 0; }
.task-row h4 { margin: 0 0 .1rem; font-size: .95rem; }
.task-row p  { margin: 0; font-size: .8rem; color: var(--muted); }
.task-row .tr-meta { font-size: .72rem; color: var(--muted); margin-top: .3rem; }
.task-row .tr-side { flex: none; text-align: right; display: grid; gap: .4rem; justify-items: end; }
.task-row .tr-pay { font-weight: 800; color: var(--teal-600); font-size: .98rem; white-space: nowrap; }
.task-row .progress { margin-top: .45rem; }
.task-row.is-done { opacity: .62; }
.task-row.is-done .tr-icon { background: var(--line-soft); color: var(--muted); }

/* Match the panel heads: each category reads as its own colour. */
.task-row.cat-game  .tr-icon { background: #F6EAF6; color: #7B1E58; }
.task-row.cat-video .tr-icon { background: var(--info-bg); color: var(--info); }
.task-row.cat-chat  .tr-icon { background: #E6FBF4; color: var(--teal-600); }
.task-row.cat-ad    .tr-icon { background: var(--warning-bg); color: var(--warning); }
.task-row.cat-music .tr-icon { background: #F6EAF6; color: #7B1E58; }

@media (max-width: 520px) {
    /* The reward and its button move to their own full-width row rather than
       squeezing the task name into a narrow column beside them. */
    .task-row { padding: .9rem 1rem; gap: .7rem; }
    .task-row .tr-side {
        flex: 1 0 100%; grid-auto-flow: column; justify-content: space-between;
        justify-items: stretch; align-items: center;
    }
    .task-row .tr-side .btn { width: 100%; }
}

/* ===================================================================
   Collapsible nav group (Tasks & Games)
   A <details> so it works with JavaScript off; the arrow is rotated by
   the open state rather than swapped for a second icon.
   =================================================================== */
.side-fold summary { list-style: none; cursor: pointer; }
.side-fold summary::-webkit-details-marker { display: none; }
.side-fold .fold-arrow { margin-left: auto; display: inline-flex; transition: transform .18s ease; }
.side-fold .fold-arrow svg { transform: rotate(90deg); width: 14px; height: 14px; }
.side-fold[open] .fold-arrow { transform: rotate(90deg); }
.side-fold .tag + .fold-arrow { margin-left: .35rem; }
.side-sub { margin: .15rem 0 .35rem .85rem; padding-left: .6rem; border-left: 1px solid var(--line); }
.side-sub .side-link { font-size: .84rem; padding: .44rem .55rem; }

/* ===================================================================
   Page heading, for the inner pages that carry their own title
   =================================================================== */
.page-head { margin-bottom: 1.1rem; }
.page-head h2 { font-size: 1.45rem; margin: 0 0 .15rem; letter-spacing: -.025em; }
.page-head p  { margin: 0; color: var(--muted); font-size: .92rem; }

/* ===================================================================
   Stat pills above a game board: "Reward: UGX 25.0000" etc.
   =================================================================== */
.stat-pills { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 1.1rem; }
.stat-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .42rem .8rem; border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--line-soft); font-size: .82rem; font-weight: 650; color: var(--ink-soft);
    white-space: nowrap;
}
.stat-pill b { font-weight: 800; color: var(--ink); }

/* Countdown under a timed round. Width is driven inline from JS. */
.timer-bar { height: 5px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; margin-top: 1.25rem; }
.timer-bar span { display: block; height: 100%; background: var(--brand-600); border-radius: var(--r-pill); transition: width .25s linear; }

/* ===================================================================
   Withdrawable balance rows (Tasks & Games, Withdrawals)
   =================================================================== */
.bal-row {
    display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
    padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md);
    margin-bottom: .55rem; background: #fff;
}
.bal-row:last-child { margin-bottom: 0; }
.bal-row .bal-name { font-size: .78rem; color: var(--muted); }
.bal-row .bal-value { font-weight: 800; font-size: 1rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.bal-row .bal-state { margin-left: auto; }

/* ===================================================================
   Task cards on Tasks & Games: one card per activity, status top-right
   =================================================================== */
.tg-card { position: relative; padding: 1.1rem 1.25rem; }
.tg-card .tg-top { display: flex; align-items: flex-start; gap: 1rem; }
.tg-card .tg-ico { color: var(--brand-600); flex: none; }
.tg-card .tg-ico svg { width: 24px; height: 24px; }
.tg-card h3 { margin: .7rem 0 .3rem; font-size: 1.12rem; letter-spacing: -.02em; }
.tg-card p  { margin: 0 0 .55rem; color: var(--muted); font-size: .89rem; }
.tg-card .tg-when { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted-soft); }
.tg-card .tg-when svg { width: 14px; height: 14px; }
.tg-card.is-locked h3, .tg-card.is-locked p { color: var(--muted); }
.tg-card .tg-foot { margin-top: .9rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* ===================================================================
   Deposits: the two mobile money buttons
   =================================================================== */
.pay-btn {
    display: flex; align-items: center; gap: .9rem; width: 100%;
    padding: 1rem 1.1rem; border: 0; border-radius: var(--r-lg);
    color: #fff; text-align: left; cursor: pointer; font: inherit;
}
.pay-btn:hover { text-decoration: none; color: #fff; filter: brightness(1.06); }
.pay-btn .pay-ico {
    width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center;
    background: rgba(255,255,255,.22);
}
.pay-btn strong { display: block; font-size: .98rem; font-weight: 750; }
.pay-btn small  { display: block; font-size: .78rem; color: rgba(255,255,255,.85); }
.pay-btn .pay-go { margin-left: auto; opacity: .9; }
.pay-mtn    { background: linear-gradient(135deg, #E8A317, #C97A05); }
.pay-airtel { background: linear-gradient(135deg, #E23B3B, #A81414); }

/* ===================================================================
   Casino multiplier pills
   =================================================================== */
.mult-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.mult-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .65rem; border-radius: var(--r-pill);
    border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07);
    font-size: .76rem; font-weight: 650; color: rgba(255,255,255,.92); white-space: nowrap;
}
.mult-pill svg { width: 13px; height: 13px; }

/* ===================================================================
   Level tabs (My Teams)
   =================================================================== */
.level-tabs { display: flex; flex-wrap: wrap; gap: .45rem; padding: 1rem 1.25rem 0; }
.level-tab {
    padding: .46rem .9rem; border-radius: var(--r-md); border: 1px solid transparent;
    font-size: .86rem; font-weight: 650; color: var(--brand-600);
}
.level-tab:hover { text-decoration: none; background: var(--line-soft); }
.level-tab.active { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: var(--sh-sm); }
.level-tab .n {
    margin-left: .4rem; padding: .05rem .4rem; border-radius: var(--r-pill);
    background: var(--muted-soft); color: #fff; font-size: .72rem; font-weight: 700;
}
.level-tab.active .n { background: var(--ink-soft); }

/* Leaderboard medals for the top three. */
.rank-medal { font-size: 1.1rem; line-height: 1; }
.rank-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.row-me { background: var(--brand-50) !important; }

/* Withdrawal reference: monospace so two of them can be compared. */
.ref-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .78rem; color: var(--brand-600); }

/* Fee breakdown above the Request Withdrawal button. */
.fee-box { background: var(--line-soft); border-radius: var(--r-md); padding: .85rem 1rem; margin: .9rem 0; }
.fee-box .fee-line { display: flex; justify-content: space-between; gap: 1rem; font-size: .87rem; padding: .22rem 0; }
.fee-box .fee-line .k { color: var(--muted); }
.fee-box .fee-line .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.fee-box .fee-net { border-top: 1px dashed var(--line); margin-top: .4rem; padding-top: .5rem; }
.fee-box .fee-net .v { color: var(--success); }

/* A field the member cannot change here, with the reason underneath. */
.input[readonly] { background: var(--line-soft); color: var(--ink-soft); cursor: default; }

@media (max-width: 520px) {
    .bal-row { gap: .5rem; }
    .bal-row .bal-state { margin-left: 0; flex: 1 0 100%; }
    .stat-pills { justify-content: flex-start; }
}

/* Two more money-card tints: the deposit and casino balances. */
.money-card.is-info  { background: linear-gradient(135deg, #1D8FD1, #14639A); }
.money-card.is-green { background: linear-gradient(135deg, #17A34A, #0B6B36); }

/* Level tiles are links to My Teams; keep them looking like tiles. */
.level-tile:hover { text-decoration: none; filter: brightness(1.08); }

/* ===================================================================
   Fix Tap: one big target, sized so it stays comfortably tappable on a
   phone without overflowing a 320px screen.
   =================================================================== */
.tap-circle {
    width: min(210px, 62vw); aspect-ratio: 1; border: 0; border-radius: 50%;
    background: var(--grad-soft); color: #fff; cursor: pointer;
    display: grid; place-items: center; margin: .5rem auto 0;
    box-shadow: var(--sh-glow); transition: transform .08s ease, filter .12s ease;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.tap-circle:active { transform: scale(.95); }
.tap-circle svg { width: 58px; height: 58px; }
.tap-circle.is-spent { background: var(--line); color: var(--muted); box-shadow: none; cursor: not-allowed; }

/* Quiz options are full width and lettered, so the tap target is the whole row. */
.quiz-options { width: 100%; }
.quiz-opt { width: 100%; text-align: left; }

/* ===================================================================
   Color Challenge: a row of four swatches, wrapping to two on a narrow
   screen rather than shrinking below a comfortable tap target.
   =================================================================== */
.swatch-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin-bottom: .4rem; }
.swatch {
    border: 0; border-radius: 12px; aspect-ratio: 1; cursor: pointer; padding: 0;
    transition: transform .1s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.swatch:hover { transform: scale(1.05); }
.swatch:active { transform: scale(.96); }
.swatch.is-answer { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ink); }
.swatch[disabled] { cursor: default; }

/* Four across stays comfortably tappable down to ~340px; below that
   two rows of two beats four slivers. */
@media (max-width: 340px) {
    .swatch-row { grid-template-columns: repeat(2, 1fr); }
}

/* ===================================================================
   Video Plays: one block per clip, separated by a rule rather than
   nested cards, so the section reads as one list.
   =================================================================== */
.vid-item { padding: 1rem 0; border-top: 1px solid var(--line); }
.vid-item.is-first { border-top: 0; padding-top: .35rem; }
.vid-slot {
    position: relative; aspect-ratio: 16 / 9; background: var(--ink);
    border-radius: var(--r-md); overflow: hidden; margin-bottom: .7rem;
}
.vid-slot iframe { display: block; width: 100%; height: 100%; border: 0; }
.vid-slot > div { width: 100%; height: 100%; }
/* TikTok is portrait. Capped so a desktop screen does not get a
   metre-tall player. */
.vid-slot.is-tall { aspect-ratio: 9 / 16; max-width: 340px; margin-left: auto; margin-right: auto; }
.vid-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid-play {
    position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(180deg, rgba(20,23,40,0) 40%, rgba(20,23,40,.45));
}
.vid-play > span {
    width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(20,23,40,.62); font-size: 1.4rem; transition: transform .15s ease;
}
.vid-play > span svg { width: 30px; height: 30px; }
.vid-play:not(:disabled):hover > span { transform: scale(1.08); }
.vid-play:disabled { cursor: default; }
.vid-slot.is-done .vid-poster { filter: grayscale(.6) brightness(.7); }
.vid-slot.is-done .vid-play > span { background: var(--teal-600, #0FA37F); }

/* ===================================================================
   Click Ads: the creative gets the full card width, the controls sit
   underneath on plain background.
   =================================================================== */
.ad-card .ad-creative {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.5rem 1.25rem; background: linear-gradient(135deg, #2C3050, #141728);
}
.ad-card .ad-image {
    display: block; width: 100%; height: auto; max-height: 420px;
    object-fit: contain; background: var(--ink);
}
.track-cover { width: 44px; height: 44px; flex: none; border-radius: 10px; object-fit: cover; }
.ad-card .ad-mark {
    width: 54px; height: 54px; flex: none; border-radius: 15px; display: grid; place-items: center;
    background: var(--grad-soft); color: #fff; font-weight: 800; font-size: 1.4rem;
}

/* The timetable has five columns; on a phone the rate is the one that can
   go, because Tasks & Games states it next to the button that uses it.
   Four columns is also what the reference platform shows. */
@media (max-width: 560px) {
    .timetable .pay-col { display: none; }
}

/* ===================================================================
   A main column with a narrower aside, collapsing to one column before
   the aside gets too cramped to use. Used by Casino and Profile; it is
   a class rather than an inline style plus a per-page media query,
   because that is how the casino page lost its collapse once already.
   =================================================================== */
.split-aside { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.15rem; }

@media (max-width: 980px) {
    .split-aside { grid-template-columns: minmax(0, 1fr); }
}

/* Payment buttons for the networks outside Uganda. Each wears the colour
   its members already associate with it. */
.pay-mpesa   { background: linear-gradient(135deg, #1FA84A, #0E7A33); }
.pay-orange  { background: linear-gradient(135deg, #FF7A1A, #D65A00); }
.pay-ecocash { background: linear-gradient(135deg, #1D6FD1, #134E96); }
.pay-other   { background: var(--grad-soft); }

/* ===================================================================
   Flag glyphs.
   Windows draws flag emoji as two letters. This font fills in the flags
   only - unicode-range confines it to the regional-indicator block, so
   no other character on the page is affected - and if it fails to load
   the letters are still a readable country code.
   Twemoji country flags, CC-BY 4.0.
   =================================================================== */
@font-face {
    font-family: "Twemoji Country Flags";
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
    src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1.8/dist/TwemojiCountryFlags.woff2") format("woff2");
    font-display: swap;
}
.flag { font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; line-height: 1; }

/* ===================================================================
   Sign-in and sign-up cards
   =================================================================== */
.auth-badge {
    width: 58px; height: 58px; border-radius: 17px; margin: 0 auto .9rem;
    display: grid; place-items: center; color: #fff; box-shadow: var(--sh-md);
}
.auth-badge svg { width: 24px; height: 24px; }
.auth-badge.is-blue  { background: var(--grad-soft); }
.auth-badge.is-green { background: linear-gradient(135deg, #17A34A, #0B6B36); }
.auth-card > h1, .auth-card > .auth-badge + h1 { text-align: center; }
.auth-card > .auth-badge ~ p.muted:first-of-type { text-align: center; }

/* A password field with a show/hide button fixed to its right edge. */
.input-reveal { display: flex; }
.input-reveal .input { border-radius: var(--r-md) 0 0 var(--r-md); min-width: 0; }
.reveal-btn {
    flex: none; width: 46px; border: 1px solid var(--line); border-left: 0;
    border-radius: 0 var(--r-md) var(--r-md) 0; background: #fff; color: var(--ink-soft);
    display: grid; place-items: center; cursor: pointer;
}
.reveal-btn:hover { color: var(--brand-600); }

/* ===================================================================
   Phone number with its country: flag + dial code on the left.
   The native <select> sits invisibly over the flag, so tapping it opens
   the platform's own picker - a full-screen list with every country's
   name on a phone - while the face shows only what fits.
   =================================================================== */
.phone-field {
    display: flex; align-items: stretch; background: #fff;
    border: 1px solid var(--line); border-radius: var(--r-md);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.phone-field:focus-within { border-color: var(--brand-500); box-shadow: 0 0 0 4px rgba(47, 111, 228, .14); }
.phone-field.has-error { border-color: var(--danger); }
.country-pick { position: relative; flex: none; display: flex; }
.country-face {
    display: flex; align-items: center; gap: .3rem; padding: 0 .35rem 0 .8rem;
    font-weight: 600; color: var(--ink); white-space: nowrap;
}
.country-face .flag { font-size: 1.3rem; }
.country-face .ico-xs { width: 12px; height: 12px; color: var(--muted); }
.country-face .dial { margin-left: .2rem; font-variant-numeric: tabular-nums; }
.country-pick select {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font-size: 16px; border: 0;
}
.country-pick:focus-within .country-face { color: var(--brand-600); }
.phone-field input {
    /* width:0 as the base: an input's built-in width (about twenty
       characters) otherwise becomes the card's minimum, and a 320px phone
       scrolls sideways. flex:1 then grows it into the space that is left. */
    flex: 1; width: 0; min-width: 0; border: 0; outline: 0; background: transparent;
    padding: .78rem .9rem .78rem .4rem; font: inherit; font-size: 1rem; color: var(--ink);
}
.phone-field input::placeholder { color: var(--muted-soft); }
.ico-xs { width: 12px; height: 12px; }

/* The public demo's banner: unmistakably "not your real money". */
.demo-banner {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: 1rem 1.1rem; border-radius: var(--r-md);
    background: #FFF7E6; border: 1px solid #F0DCB4; border-left: 4px solid #D4900B;
}
.demo-banner svg { flex: none; color: #8A5300; margin-top: .15rem; }
.demo-banner p { margin: 0; color: #5C3B00; font-size: .92rem; }

/* Console: one collapsible block per market, so eighteen of them stay
   scannable. The summary line carries what an admin looks for first. */
.line-group { border-top: 1px solid var(--line); }
.line-group > summary {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .8rem 1.25rem; cursor: pointer; list-style: none;
}
.line-group > summary::-webkit-details-marker { display: none; }
.line-group > summary::after { content: "+"; margin-left: auto; color: var(--muted); font-weight: 700; }
.line-group[open] > summary::after { content: "\2212"; }
.line-group > summary .flag { font-size: 1.2rem; }
.line-group .add-row td { background: var(--line-soft); }