/* ========================================
   DoubleCash - Main Stylesheet
   Replica of creativeunion.online layout
   Dark Cocoa / Crimson Theme
   ======================================== */

/* ---------- CSS Custom Properties ---------- */
:root {
    --background: 13 42% 10%;
    --foreground: 40 52% 93%;
    --card: 14 33% 16%;
    --card-foreground: 40 52% 93%;
    --popover: 14 33% 16%;
    --popover-foreground: 40 52% 93%;
    --primary: 50 75% 68%;
    --primary-foreground: 0 0% 100%;
    --secondary: 14 30% 22%;
    --secondary-foreground: 40 52% 93%;
    --muted: 14 30% 21%;
    --muted-foreground: 28 24% 68%;
    --accent: 50 75% 68%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 74% 52%;
    --destructive-foreground: 0 0% 100%;
    --border: 14 24% 26%;
    --input: 14 28% 24%;
    --ring: 50 75% 68%;
    --radius: 1rem;

    --crimson-deep: 50 55% 30%;
    --crimson: 50 60% 42%;
    --crimson-bright: 50 70% 55%;
    --cocoa: 14 33% 16%;
    --cocoa-2: 14 30% 21%;
    --cocoa-3: 14 26% 27%;
    --cream: 40 52% 93%;
    --gold: 50 75% 55%;
    --gold-deep: 45 55% 38%;
    --header-ink: 50 45% 16%;
    --soft: 14 30% 21%;
    --success: 145 60% 45%;
    --yellow: 50 75% 55%;
    --yellow-deep: 45 55% 42%;
    --yellow-soft: 50 30% 28%;
    --gradient-start: 50 55% 30%;
    --gradient-mid: 50 60% 42%;
    --gradient-end: 50 70% 55%;
}

/* ---------- Reset ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-color: hsl(var(--border));
    letter-spacing: 0;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    min-height: 100vh;
    overflow-x: hidden;
}

button, input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    border: none;
    outline: none;
    background: none;
}

button { cursor: pointer; }

a {
    color: inherit;
    text-decoration: none;
}

/* ---------- Page System ---------- */
.page {
    min-height: 100vh;
    padding-bottom: 7rem;
}

.page.hidden { display: none; }

.page-content {
    padding: 1.25rem;
}

/* ---------- App container ---------- */
.app { min-height: 100vh; }

/* ---------- Crimson Header (main gradient) ---------- */
.crimson, .header-crimson {
    background: linear-gradient(105deg, hsl(var(--crimson-deep)), hsl(var(--crimson)) 55%, hsl(var(--crimson-bright)));
}

.crimson-btn {
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: #fff;
    box-shadow: 0 8px 22px hsl(50 55% 32% / 0.45);
}

.text-gold { color: hsl(var(--gold)); }

/* ---------- Standard Back Header (104px) ---------- */
.app-header {
    position: relative;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-header .header-block {
    position: relative;
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

.app-header .back-btn,
.header-back-btn {
    position: absolute;
    left: 0.75rem;
    width: 52px;
    height: 52px;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--header-ink));
    transition: transform 0.15s ease;
}

.app-header .back-btn:active,
.header-back-btn:active { transform: scale(0.95); }

.app-header .back-btn svg,
.header-back-btn svg {
    width: 24px;
    height: 24px;
}

.app-header h1 {
    font-size: 22px;
    font-weight: 700;
    color: hsl(var(--header-ink));
}

.app-header .header-right {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 700;
    color: hsl(var(--header-ink));
}

/* ---------- Section Title (rule-accent) ---------- */
.section-title {
    padding-top: 0.25rem;
    padding-bottom: 0.75rem;
}

.section-title h2 {
    font-size: 20px;
    font-weight: 700;
    color: hsl(var(--foreground));
    line-height: 1.2;
}

.rule-accent {
    margin-top: 0.5rem;
    display: block;
    width: 110px;
    height: 4px;
    border-radius: 2px;
    background: hsl(var(--primary));
}

/* ---------- Card Component (ge) ---------- */
.ge-card {
    background: hsl(var(--card));
    border-radius: 1.5rem;
    border: 1px solid hsl(var(--border) / 0.6);
    overflow: hidden;
}

/* ---------- Auth Page Layout ---------- */
.auth-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem;
}

@media (max-width: 767px) {
    body { zoom: 0.9; }
    .auth-page { min-height: calc(100dvh / 0.9); }
}

.auth-title {
    text-align: center;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.025em;
    color: hsl(50 80% 92%);
}

/* ---------- Tab Switcher ---------- */
.tab-switcher {
    margin-top: 2rem;
    height: 58px;
    border-radius: 9999px;
    background: hsl(20 26% 26%);
    padding: 4px;
    display: flex;
}

.tab-btn {
    flex: 1;
    height: 100%;
    border-radius: 9999px;
    font-size: 16px;
    font-weight: 700;
    color: hsl(50 25% 78%);
    transition: background 0.15s ease, color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-btn.active {
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: #fff;
    box-shadow: 0 8px 22px hsl(50 55% 32% / 0.45);
}

/* ---------- Form ---------- */
.auth-form, .form-section {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---------- Input Fields ---------- */
.input-wrapper {
    position: relative;
    width: 100%;
}

.input-field {
    width: 100%;
    height: 52px;
    border-radius: 9999px;
    padding: 0 1.25rem;
    font-size: 15px;
    color: hsl(var(--foreground));
    background: hsl(20 26% 28%);
    border: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.input-field::placeholder {
    color: hsl(var(--gold-deep));
}

.input-field:focus {
    border-color: hsl(var(--primary));
}

.phone-prefix {
    position: absolute;
    left: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: hsl(var(--gold-deep));
    pointer-events: none;
    font-weight: 500;
}

.input-field.has-prefix {
    padding-left: 76px;
}

.input-field.has-suffix {
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: hsl(var(--gold-deep));
    cursor: pointer;
}

.password-toggle svg {
    width: 20px;
    height: 20px;
}

.auth-error {
    color: hsl(var(--destructive));
    font-size: 14px;
    text-align: center;
}

.register-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ---------- Radio Group ---------- */
.radio-group {
    display: flex;
    gap: 0.75rem;
}

.radio-option {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: hsl(var(--secondary));
    border: 1px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.radio-option:has(input:checked) {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.1);
}

.radio-option input { display: none; }

.radio-custom {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid hsl(var(--muted-foreground));
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s ease;
}

.radio-net-logo {
    width: 56px;
    height: 36px;
    border-radius: 6px;
    object-fit: contain;
    flex-shrink: 0;
    margin-left: 0.1rem;
    background: #fff;
    padding: 2px;
}

.radio-option:has(input:checked) .radio-custom {
    border-color: hsl(var(--primary));
}

.radio-option:has(input:checked) .radio-custom::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: hsl(var(--primary));
}

.radio-label {
    font-size: 13px;
    font-weight: 500;
    color: hsl(var(--cream));
}

/* ---------- Submit Button ---------- */
.submit-btn {
    margin-top: 0.5rem;
    width: 100%;
    height: 56px;
    border-radius: 9999px;
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 8px 22px hsl(50 55% 32% / 0.45);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.submit-btn:active { transform: scale(0.99); }

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.submit-btn.green-btn {
    background: linear-gradient(100deg, hsl(155 60% 35%), hsl(145 60% 45%));
    box-shadow: 0 8px 22px rgba(20, 120, 70, 0.3);
}

/* ---------- Loading Spinner ---------- */
.spinner-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    animation: fadeIn 0.15s ease;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid hsl(var(--cocoa-3));
    border-top-color: hsl(var(--primary));
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-100%); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes slideUp {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-100%); }
}

/* ---------- Toast Notifications ---------- */
.toast-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    display: flex;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
}

.toast {
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 14px;
    font-weight: 500;
    max-width: 400px;
    width: 100%;
    text-align: center;
    pointer-events: auto;
    animation: slideDown 0.15s ease;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.toast.error { background: hsl(var(--destructive)); color: #fff; }
.toast.success { background: hsl(var(--success)); color: #fff; }
.toast.info {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
}
.toast.hiding { animation: slideUp 0.15s ease forwards; }

/* ---------- Dashboard ---------- */
.dashboard-page {
    min-height: 100vh;
    padding-bottom: 7rem;
}

.dashboard-header {
    background: linear-gradient(105deg, hsl(var(--crimson-deep)), hsl(var(--crimson)) 55%, hsl(var(--crimson-bright)));
    padding: 1.25rem 1rem 1.5rem;
}

.dashboard-header-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dashboard-brand {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.05;
    color: hsl(var(--cream));
    max-width: 170px;
}

.dashboard-balance {
    flex: 1;
    text-align: right;
    font-size: 26px;
    font-weight: 700;
    color: #fff;
}

.dashboard-avatar-btn {
    width: 54px;
    height: 54px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.dashboard-avatar-btn img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* ---------- Image Carousel ---------- */
.carousel-wrap {
    padding: 0 1rem;
    margin-top: -0.5rem;
}

.carousel {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.4);
}

.carousel img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.carousel-dots {
    position: absolute;
    bottom: 0.75rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: hsl(0 0% 100% / 0.55);
    transition: background 0.2s ease;
}

.carousel-dot.active {
    background: hsl(var(--crimson-bright));
}

/* ---------- Deposit / Withdraw Grid ---------- */
.action-grid {
    padding: 0.75rem 1rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-radius: 1rem;
    overflow: hidden;
}

.action-grid-btn {
    height: 100px;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.025em;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-grid-btn:active { opacity: 0.9; }

.action-grid-btn.deposit {
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson)));
}

.action-grid-btn.withdraw {
    background: linear-gradient(100deg, hsl(var(--crimson)), hsl(var(--crimson-bright)));
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* ---------- Products section ---------- */
.products-section {
    padding: 1rem 1rem 0;
}

.products-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.product-card {
    background: hsl(var(--card));
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.6);
}

.product-card img {
    width: 100%;
    height: 176px;
    object-fit: cover;
    display: block;
}

.product-gold-bar {
    height: 10px;
    background: linear-gradient(90deg, hsl(50 60% 42%), hsl(50 70% 55%));
}

.product-body {
    padding: 1rem 1.25rem 1.25rem;
}

.product-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.product-name {
    font-size: 20px;
    font-weight: 700;
    color: hsl(var(--foreground));
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-count {
    font-size: 18px;
    font-weight: 500;
    color: hsl(var(--foreground) / 0.9);
    flex-shrink: 0;
}

.product-stats {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 0;
}

.product-stat-value {
    font-size: 21px;
    font-weight: 700;
    color: hsl(var(--foreground));
    line-height: 1.2;
}

.product-stat-label {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.product-actions {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid hsl(var(--border) / 0.6);
    display: flex;
    justify-content: center;
}

.product-buy-btn {
    padding: 0 3rem;
    height: 54px;
    border-radius: 9999px;
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 8px 22px hsl(50 55% 32% / 0.45);
}

.product-buy-btn:active { transform: scale(0.96); }

.product-buy-btn:disabled {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* ---------- Account Page ---------- */
.account-profile-card {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 1.25rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.account-avatar {
    position: relative;
    width: 92px;
    height: 92px;
    border-radius: 9999px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.account-avatar img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.account-avatar .online-dot {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
    background: hsl(140 65% 45%);
    border: 2px solid #fff;
}

.account-user-info {
    flex: 1;
    min-width: 0;
}

.account-id-badge {
    display: inline-block;
    padding: 0.375rem 1rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}

.account-phone {
    margin-top: 0.5rem;
    font-size: 20px;
    color: #fff;
    word-break: break-word;
}

.account-balance-label {
    margin-top: 0.25rem;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.8);
}

.account-balance-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.deposit-balance-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: 1rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.5);
    padding: 1.25rem;
}

.deposit-balance-card .deposit-icon {
    width: 56px;
    height: 56px;
    border-radius: 0.75rem;
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.deposit-balance-card .deposit-icon svg { width: 28px; height: 28px; }

.deposit-balance-card .db-label {
    font-size: 15px;
    color: hsl(var(--muted-foreground));
}

.deposit-balance-card .db-value {
    font-size: 22px;
    font-weight: 700;
    color: hsl(var(--foreground));
    word-break: break-word;
}

/* ---------- Account Functions Grid ---------- */
.functions-heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1rem 0;
}

.functions-heading .bar {
    width: 4px;
    height: 28px;
    border-radius: 2px;
    background: hsl(var(--primary));
}

.functions-heading h2 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: hsl(var(--foreground));
}

.functions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 1.25rem 1rem 0;
}

.function-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.5);
    border-radius: 1rem;
    padding: 1.5rem 0.25rem;
    transition: transform 0.15s ease;
    text-align: center;
}

.function-card:active { transform: scale(0.95); }

.function-icon {
    width: 52px;
    height: 52px;
    border-radius: 0.75rem;
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.function-icon svg { width: 26px; height: 26px; }

.function-label {
    font-size: 16px;
    font-weight: 600;
    color: hsl(var(--foreground));
    line-height: 1.2;
}

/* ---------- Recharge / Withdraw ---------- */
.money-page {
    min-height: 100vh;
    padding-bottom: 9rem;
}

.wallet-card {
    border-radius: 1rem;
    background: linear-gradient(105deg, hsl(var(--crimson-deep)), hsl(var(--crimson)) 55%, hsl(var(--crimson-bright)));
    padding: 1.25rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.wallet-card .wallet-icon {
    width: 74px;
    height: 74px;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.wallet-card .wallet-icon svg { width: 36px; height: 36px; }

.wallet-card .wallet-label {
    font-size: 14px;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.9);
}

.wallet-card .wallet-value {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.wallet-card .wallet-status {
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.9);
}

.wallet-card .wallet-status .dot {
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background: hsl(140 65% 50%);
}

.wallet-help-link {
    display: block;
    margin-top: 1rem;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- Preset Amounts ---------- */
.preset-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.preset-btn {
    height: 86px;
    border-radius: 0.75rem;
    font-size: 14px;
    font-weight: 700;
    transition: transform 0.15s ease;
}

.preset-btn:active { transform: scale(0.95); }

.preset-btn.selected {
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: #fff;
    box-shadow: 0 0 0 3px hsl(50 70% 55% / 0.45);
}

.preset-btn.unselected {
    background: transparent;
    color: hsl(var(--cream));
    border: 1px solid hsl(var(--border));
}

/* ---------- Payment Methods (Deposit) ---------- */
.pay-title {
    font-size: 15px;
    font-weight: 600;
    color: hsl(var(--cream));
    margin-bottom: 0.9rem;
}

.pay-methods {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pay-method {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 0.9rem;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
}

.pay-method .pay-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
}

.pay-method .pay-badge.mtn { background: hsl(185 100% 40%); }
.pay-method .pay-badge.airtel { background: hsl(220 80% 50%); }

.pay-method-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.pay-method-label {
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.pay-number {
    font-size: 16px;
    font-weight: 700;
    color: hsl(var(--primary));
    letter-spacing: 0.3px;
    word-break: break-word;
}

.pay-name {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    word-break: break-word;
}

/* ---------- Fixed bottom action ---------- */
.fixed-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: hsl(var(--background));
    border-top: 1px solid hsl(var(--border) / 0.4);
    padding: 1rem;
    z-index: 40;
}

.fixed-action-bar .primary-btn {
    width: 100%;
    height: 78px;
    border-radius: 1rem;
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 8px 22px hsl(50 55% 32% / 0.45);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.fixed-action-bar .primary-btn:active { transform: scale(0.99); }
.fixed-action-bar .primary-btn:disabled { opacity: 0.6; }

/* ---------- Withdraw amount input ---------- */
.amount-input-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: 0.75rem;
    padding: 0 1.25rem;
    height: 86px;
}

.amount-input-card .ugx {
    font-size: 24px;
    font-weight: 700;
    color: hsl(var(--gold));
}

.amount-input-card input {
    flex: 1;
    background: transparent;
    outline: none;
    font-size: 24px;
    font-weight: 600;
    color: hsl(var(--foreground));
    min-width: 0;
}

.amount-input-card input::placeholder { color: hsl(var(--muted-foreground)); }

.amount-input-card.invalid { border-color: hsl(2 80% 60%); }

.rules-list {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
}

.rules-list p {
    font-size: 19px;
    color: hsl(var(--muted-foreground));
}

.rules-list p strong { color: hsl(var(--foreground)); }

/* ---------- Modal (payment + popups) ---------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn 0.15s ease;
}

.modal-overlay.hidden { display: none; }

.modal-card {
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 1.5rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.6);
    padding: 1.25rem;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
}

/* ---------- Announcement Popup ---------- */
.announcement-modal-title {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 1rem;
}

.announcement-modal-title p {
    font-size: 26px;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.announcement-close {
    position: absolute;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    background: hsl(50 45% 30%);
    color: hsl(var(--foreground));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.announcement-items {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.announcement-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background: hsl(50 40% 26% / 0.6);
}

.announcement-item .check {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    border: 2px solid hsl(var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.announcement-item .check span {
    width: 6px;
    height: 10px;
    background: hsl(var(--primary));
    border-radius: 9999px;
}

.announcement-item p {
    font-size: 16px;
    color: hsl(var(--foreground));
}

.announcement-item p strong { color: #fff; }

.official-group-btn {
    margin-top: 1rem;
    width: 100%;
    height: 58px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(100deg, hsl(202 85% 42%), hsl(200 90% 48%));
}

.official-group-btn svg { width: 24px; height: 24px; }

/* ---------- Payment Checkout Modal ---------- */
.checkout-modal .modal-card {
    max-width: 430px;
    border-radius: 1rem;
    padding: 0;
    background: hsl(var(--background));
}

.checkout-body {
    padding: 1.75rem 1.5rem 1.25rem;
}

.checkout-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    object-fit: contain;
}

.checkout-title {
    text-align: center;
    font-size: 15px;
    color: hsl(var(--primary));
    margin-top: 0.5rem;
}

.checkout-desc {
    margin-top: 1.75rem;
    font-size: 16px;
    font-weight: 600;
    color: hsl(var(--foreground));
    line-height: 1.4;
}

.checkout-amount-row {
    margin-top: 1.5rem;
    font-size: 17px;
    font-weight: 600;
}

.checkout-amount-row strong {
    color: hsl(var(--primary));
}

.checkout-method-label {
    margin-top: 1.5rem;
    font-size: 15px;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    display: block;
    margin-bottom: 1rem;
}

.checkout-networks {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.checkout-network {
    position: relative;
    width: 108px;
    height: 90px;
    border-radius: 0.5rem;
    border: 2px solid hsl(var(--border));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    overflow: hidden;
    cursor: pointer;
    background: hsl(var(--card));
    transition: border-color 0.15s ease;
}

.checkout-network input { display: none; }

.checkout-network.selected {
    border-color: hsl(var(--primary));
}

.checkout-network .net-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 52px;
    padding: 4px;
    border-radius: 10px;
    overflow: hidden;
}

.checkout-network .net-badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.checkout-network .net-badge.mtn { background: #FDB913; }
.checkout-network .net-badge.airtel { background: #E40000; }

.checkout-network .net-label {
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.checkout-phone {
    margin-top: 1.25rem;
}

.checkout-payto {
    margin-top: 0.9rem;
    font-size: 13px;
    line-height: 1.5;
    color: hsl(var(--muted-foreground));
}

.checkout-payto strong {
    color: hsl(var(--gold));
    font-weight: 700;
    word-break: break-word;
}

.checkout-submit {
    margin-top: 1.25rem;
    width: 100%;
    height: 58px;
    border-radius: 0.75rem;
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    box-shadow: 0 8px 22px hsl(50 55% 32% / 0.45);
}

.checkout-submit:disabled { opacity: 0.6; }

.checkout-note {
    margin-top: 0.75rem;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: hsl(200 70% 45%);
}

.screenshot-upload {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    margin-top: 0.5rem;
    border: 2px dashed hsl(var(--border));
    border-radius: 0.9rem;
    background: hsl(var(--card));
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.screenshot-upload:hover { border-color: hsl(var(--primary)); }
.screenshot-upload input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.screenshot-empty {
    font-size: 14px;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    padding: 1rem;
    text-align: center;
}
.screenshot-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 150px;
}
.screenshot-preview img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: 0.5rem;
}
.record-screenshot-link {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 12px;
    font-weight: 600;
    color: hsl(var(--primary));
    text-decoration: underline;
}

/* ---------- Customer Service Float ---------- */
.cs-float {
    position: fixed;
    right: 1rem;
    bottom: 5.25rem;
    z-index: 40;
    width: auto;
    max-width: calc(100vw - 2rem);
    min-height: 54px;
    border-radius: 9999px;
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 1.15rem 0.5rem 0.85rem;
    box-shadow: 0 8px 22px hsl(50 55% 32% / 0.45);
    transition: transform 0.15s ease;
    border: 2px solid hsl(50 45% 24% / 0.35);
    cursor: pointer;
    text-align: left;
    line-height: 1.35;
}

.cs-float:active { transform: scale(0.96); }

.cs-float svg { width: 30px; height: 30px; flex-shrink: 0; }

.cs-float-text {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    letter-spacing: 0.1px;
    white-space: normal;
}

/* ---------- Bottom Navigation ---------- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: hsl(var(--card));
    border-top: 1px solid hsl(var(--border) / 0.5);
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.5rem 0.5rem 0.75rem;
}

.nav-item {
    width: 56px;
    height: 56px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(38 40% 78%);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.nav-item:active { transform: scale(0.94); }

.nav-item.active {
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: hsl(var(--header-ink));
    box-shadow: 0 8px 22px hsl(50 55% 32% / 0.45);
}

.nav-item svg {
    width: 26px;
    height: 26px;
}

.nav-item-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ---------- Share / Invite ---------- */
.share-banner {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid hsl(var(--border) / 0.4);
}

.share-banner img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.share-banner-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 1.25rem;
    text-align: center;
}

.share-banner-overlay .share-ring {
    width: 74px;
    height: 74px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-banner-overlay .share-ring svg {
    width: 40px;
    height: 40px;
    color: #fff;
}

.share-banner-overlay h3 {
    margin-top: 0.5rem;
    font-size: 25px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.share-banner-overlay p {
    margin-top: 0.25rem;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.4;
}

.link-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.link-card-head svg {
    width: 24px;
    height: 24px;
}

.link-card-head p {
    font-size: 21px;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.link-card-body {
    padding: 0 1rem 1.25rem;
}

.link-display-box {
    border-radius: 1rem;
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    padding: 0.75rem;
}

.link-display-box .link-text {
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 1rem;
    font-family: ui-monospace, 'Courier New', monospace;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    word-break: break-all;
}

.link-copy-btn {
    margin-top: 0.75rem;
    width: 100%;
    height: 58px;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.link-copy-btn svg { width: 24px; height: 24px; }

.invite-actions {
    padding: 1rem 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.invite-whatsapp-btn {
    width: 100%;
    height: 58px;
    border-radius: 1rem;
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.invite-whatsapp-btn .wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: #25d366;
}

.invite-whatsapp-btn .wa svg { width: 20px; height: 20px; fill: #fff; }

/* ---------- Team Bonus ---------- */
.team-reward-progress {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    margin-top: 0.5rem;
    height: 10px;
    width: 100%;
    border-radius: 9999px;
    overflow: hidden;
    background: hsl(var(--soft));
}

.team-reward-progress::-webkit-progress-bar {
    background: hsl(var(--soft));
    border-radius: 9999px;
}

.team-reward-progress::-webkit-progress-value {
    background: linear-gradient(100deg, hsl(50 60% 42%), hsl(50 70% 55%));
    border-radius: 9999px;
}

.team-reward-progress::-moz-progress-bar {
    background: linear-gradient(100deg, hsl(50 60% 42%), hsl(50 70% 55%));
    border-radius: 9999px;
}

/* ---------- Team Bonus (invite page) ---------- */
.team-bonus-desc {
    padding: 0 1.25rem 1rem;
    font-size: 15px;
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
}

.team-bonus-error {
    padding: 0 1.25rem 1rem;
    color: hsl(var(--destructive));
    font-size: 15px;
}

.team-bonus-error button {
    color: hsl(var(--crimson-bright));
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 600;
    padding: 0;
}

.team-bonus-tiers {
    border-top: 1px solid hsl(var(--border) / 0.5);
}

.team-bonus-tier {
    padding: 1.25rem;
    border-top: 1px solid hsl(var(--border) / 0.5);
}

.team-bonus-tier:first-child {
    border-top: none;
}

.tbt-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.tbt-star {
    width: 62px;
    height: 62px;
    border-radius: 1rem;
    background: linear-gradient(160deg, hsl(50 70% 55%), hsl(50 60% 42%));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tbt-star svg {
    width: 32px;
    height: 32px;
}

.claim-bonus-btn {
    height: 44px;
    padding: 0 1.5rem;
    border-radius: 0.5rem;
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.claim-bonus-btn:disabled { opacity: 0.6; }

.tbt-badge {
    height: 44px;
    padding: 0 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border));
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 700;
    color: hsl(var(--gold));
}

.tbt-badge.tbt-paid {
    color: hsl(var(--success));
    border-color: hsl(var(--success) / 0.5);
}

.tbt-progress-row {
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tbt-progress-row p {
    font-size: 15px;
    color: hsl(var(--muted-foreground));
}

.tbt-progress-row p:last-child {
    font-size: 16px;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.tbt-reward {
    margin-top: 1rem;
    height: 62px;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--gold-deep));
    background: hsl(40 70% 18%);
    color: hsl(var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 22px;
    font-weight: 700;
}

.tbt-reward-dot {
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background: hsl(var(--gold));
    flex-shrink: 0;
}

/* ---------- My Products ---------- */
.my-products-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.my-product-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.7);
    border-radius: 1.5rem;
    overflow: hidden;
}

.my-product-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.my-product-card .mp-body {
    padding: 1rem 1.25rem 1.25rem;
}

.mp-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.mp-name {
    font-size: 17px;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.mp-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    background: hsl(var(--success) / 0.15);
    color: hsl(var(--success));
}

.mp-badge.expired {
    background: hsl(var(--destructive) / 0.15);
    color: hsl(var(--destructive));
}

.mp-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.mp-detail {
    background: hsl(var(--secondary));
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
}

.mp-detail-label {
    font-size: 11px;
    color: hsl(var(--muted-foreground));
}

.mp-detail-value {
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--foreground));
}

/* ---------- Info Cards ---------- */
.info-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.info-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.7);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
}

.info-label {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}

.info-value {
    font-size: 20px;
    font-weight: 700;
    color: hsl(var(--gold));
    margin-top: 0.25rem;
}

/* ---------- Gift Code ---------- */
.gift-section-box {
    background: hsl(var(--soft));
    border-radius: 1rem;
    padding: 1rem;
}

.gift-input {
    width: 100%;
    height: 56px;
    border-radius: 0.75rem;
    text-align: center;
    font-size: 18px;
    letter-spacing: 0.1em;
    font-weight: 700;
    text-transform: uppercase;
    background: hsl(var(--card));
}

.gift-note {
    background: hsl(var(--muted));
    border-radius: 1rem;
    padding: 1rem;
    font-size: 14px;
    color: hsl(var(--muted-foreground));
}

/* ---------- About ---------- */
.about-card {
    background: hsl(var(--card));
    border-radius: 1.5rem;
    padding: 1.25rem;
    font-size: 16px;
    line-height: 1.6;
    color: hsl(var(--foreground));
}

.about-version {
    text-align: center;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    padding: 1rem 0;
}

/* ---------- Team ---------- */
.team-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 2rem;
    padding: 0.75rem 1.25rem 2rem;
    text-align: center;
    border-top: 1px solid hsl(var(--border) / 0.4);
}

.team-stat-card {
    text-align: center;
}

.team-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-top: 0.5rem;
}

.team-stat-label {
    font-size: 17px;
    color: hsl(var(--foreground) / 0.9);
}

/* ---------- Team Members (level cards, matching original theme) ---------- */
.team-levels {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.team-level-card {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    background: hsl(14 30% 21%); /* cocoa-2 for L2/L3 */
}

.team-level-card.team-level-card-primary {
    border-color: transparent;
    background: linear-gradient(100deg, hsl(50 55% 30%), hsl(50 70% 55%)); /* pale yellow */
}

.team-level-top {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
}

.team-level-badge {
    width: 62px;
    height: 62px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    background: hsl(50 40% 28%);  /* dark yellow for L2/L3 */
    flex-shrink: 0;
}

.team-level-card-primary .team-level-badge {
    background: hsl(0 0% 100% / 0.25); /* translucent white on crimson bg */
}

.team-level-info {
    flex: 1;
    min-width: 0;
}

.team-level-name {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.team-level-percent {
    font-size: 17px;
    font-weight: 700;
    color: hsl(var(--gold));
    margin-top: 0.15rem;
}

.team-level-members-btn {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    text-align: left;
    background: hsl(14 26% 24%);  /* cocoa footer for L2/L3 */
}

.team-level-card-primary .team-level-members-btn {
    background: hsl(0 0% 100% / 0.12); /* translucent white for L1 */
}

.tl-members-label {
    display: block;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: hsl(0 0% 100% / 0.75);
    font-weight: 500;
}

.tl-members-count {
    display: block;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-top: 0.15rem;
}

.tl-members-link {
    font-size: 16px;
    font-weight: 700;
    color: hsl(0 0% 100% / 0.85);
    padding-bottom: 0.25rem;
    flex-shrink: 0;
}

/* ---------- Team Level Modal ---------- */
.team-level-member {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid hsl(var(--border) / 0.5);
}

.team-level-member:last-child {
    border-bottom: none;
}

.team-level-member-avatar {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: hsl(50 70% 55%); /* pale yellow tablet */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    flex-shrink: 0;
}

.team-level-member-info {
    flex: 1;
    min-width: 0;
}

.team-level-member-phone {
    font-size: 17px;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.team-level-member-date {
    font-size: 13px;
    color: hsl(var(--muted-foreground));
    margin-top: 0.1rem;
}

.team-level-member-commission {
    font-size: 17px;
    font-weight: 700;
    color: hsl(50 75% 68%); /* pale yellow for commission text */
    flex-shrink: 0;
}

.team-level-member-avatar.active {
    background: linear-gradient(100deg, hsl(145 60% 35%), hsl(145 65% 45%)); /* green for active */
}

.team-member-active-badge {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: hsl(145 60% 38%);
}

.team-member-inactive-badge {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--secondary));
}

.team-active-list {
    display: flex;
    flex-direction: column;
}

.team-active-member-right {
    text-align: right;
    flex-shrink: 0;
}

.team-active-member-deposit {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: hsl(145 60% 35%);
}

.team-active-member-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
}

/* ---------- Records ---------- */
.filter-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
}

.filter-tab {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    background: hsl(var(--secondary));
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
    transition: all 0.15s ease;
}

.filter-tab.active {
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: #fff;
}

.records-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.record-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.7);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.record-info {
    flex: 1;
    min-width: 0;
}

.record-title {
    font-size: 14px;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.record-date {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    margin-top: 0.125rem;
}

.record-amount {
    font-size: 15px;
    font-weight: 700;
    text-align: right;
}

.record-amount.positive { color: hsl(var(--success)); }
.record-amount.negative { color: hsl(var(--destructive)); }

.record-status {
    font-size: 11px;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    margin-top: 0.25rem;
    display: inline-block;
}

.record-status.pending {
    background: hsl(50 60% 55% / 0.15);
    color: hsl(var(--gold));
}

.record-status.completed {
    background: hsl(var(--success) / 0.15);
    color: hsl(var(--success));
}

.record-status.rejected {
    background: hsl(var(--destructive) / 0.15);
    color: hsl(var(--destructive));
}

/* ---------- Empty State ---------- */
.empty-state {
    padding: 4rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.empty-state .empty-ring {
    width: 110px;
    height: 110px;
    border-radius: 9999px;
    border: 1px solid hsl(var(--gold-deep) / 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--gold-deep));
}

.empty-state .empty-ring svg {
    width: 48px;
    height: 48px;
}

.empty-state .empty-title {
    margin-top: 2rem;
    font-size: 20px;
    font-weight: 700;
    color: hsl(var(--foreground));
}

.empty-state .empty-sub {
    margin-top: 0.75rem;
    font-size: 17px;
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
}

.simple-empty {
    text-align: center;
    padding: 4rem 1rem;
    font-size: 16px;
    color: hsl(var(--muted-foreground));
}

/* ---------- Support Chat page ---------- */
.chat-header-name {
    text-align: center;
}

.chat-support-name {
    font-size: 18px;
    font-weight: 700;
    color: hsl(var(--header-ink));
    line-height: 1.2;
}

.chat-support-status {
    font-size: 11px;
    font-weight: 600;
    color: hsl(var(--header-ink) / 0.7);
    margin-top: 0.15rem;
}

.chat-header-avatar {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.18);
    color: hsl(var(--header-ink));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
}

.chat-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 104px - 84px);
    min-height: 0;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-empty {
    margin: auto;
    text-align: center;
    color: hsl(var(--muted-foreground));
    font-size: 14px;
    line-height: 1.6;
    padding: 1rem;
    max-width: 280px;
}

.chat-bubble {
    max-width: 78%;
    padding: 0.6rem 0.85rem;
    border-radius: 1rem;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-bubble .chat-time {
    display: block;
    margin-top: 0.25rem;
    font-size: 10px;
    opacity: 0.7;
}

.chat-bubble .chat-sender {
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: hsl(50 75% 68%);
    margin-bottom: 0.2rem;
}

.chat-bubble.user {
    align-self: flex-end;
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: #fff;
    border-bottom-right-radius: 0.3rem;
}

.chat-bubble.admin {
    align-self: flex-start;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
    border-bottom-left-radius: 0.3rem;
}

.chat-composer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: hsl(var(--card));
    border-top: 1px solid hsl(var(--border) / 0.5);
}

.chat-links {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: hsl(var(--card));
    border-top: 1px solid hsl(var(--border) / 0.5);
}

.chat-link-btn {
    flex: 1;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 0.65rem;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 13px;
    font-weight: 600;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.chat-link-btn svg { width: 17px; height: 17px; }
.chat-link-btn:active { transform: scale(0.97); opacity: 0.85; }

.chat-link-group {
    border-color: transparent;
    background: linear-gradient(100deg, hsl(202 85% 42%), hsl(200 90% 48%));
    color: #fff;
}

.chat-input {
    flex: 1;
    height: 46px;
    border-radius: 9999px;
    border: 1px solid hsl(var(--border));
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    padding: 0 1.1rem;
    font-size: 14px;
}

.chat-input::placeholder { color: hsl(var(--muted-foreground) / 0.8); }
.chat-input:focus { outline: none; border-color: hsl(var(--ring)); }

.chat-send-btn {
    width: 46px;
    height: 46px;
    border-radius: 9999px;
    flex-shrink: 0;
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.chat-send-btn:active { transform: scale(0.93); }
.chat-send-btn:disabled { opacity: 0.6; }
.chat-send-btn svg { width: 20px; height: 20px; }

/* ---------- Rankings ---------- */
.rankings-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ---------- Payment Providers (shown after submit) ---------- */
.payment-providers {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.7);
    border-radius: 1rem;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.provider-heading {
    font-size: 14px;
    font-weight: 700;
    color: hsl(var(--foreground));
    margin-bottom: 0.75rem;
}

.provider-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
}

.provider-card.mtn {
    background: hsl(185 100% 40% / 0.12);
    border: 1px solid hsl(185 100% 40% / 0.3);
}

.provider-card.airtel {
    background: hsl(220 80% 50% / 0.12);
    border: 1px solid hsl(220 80% 50% / 0.3);
}

.provider-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.provider-card.mtn .provider-icon { background: hsl(185 100% 40%); }
.provider-card.airtel .provider-icon { background: hsl(220 80% 50%); }

.provider-info {
    flex: 1;
    min-width: 0;
}

.provider-number {
    font-size: 16px;
    font-weight: 700;
    color: hsl(var(--foreground));
    letter-spacing: 0.02em;
}

.provider-name {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    margin-top: 0.125rem;
}

.provider-card .copy-btn {
    background: hsl(var(--secondary));
    box-shadow: none;
}

.provider-hint {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    line-height: 1.5;
    margin-top: 0.75rem;
}

/* ---------- Referral link box (used in dashboard) ---------- */
.referral-link-box {
    background: hsl(var(--secondary));
    border-radius: 0.75rem;
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.referral-link-text {
    flex: 1;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    word-break: break-all;
    line-height: 1.4;
}

.copy-btn {
    flex-shrink: 0;
    background: linear-gradient(100deg, hsl(var(--crimson-deep)), hsl(var(--crimson-bright)));
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Profile page legacy ---------- */
.profile-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.profile-stat {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border) / 0.7);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
}

.profile-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: hsl(var(--gold));
}

.profile-stat-label {
    font-size: 12px;
    color: hsl(var(--muted-foreground));
    margin-top: 0.125rem;
}

/* ---------- Misc Utilities ---------- */
.hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap; border-width: 0;
}
.text-center { text-align: center; }
.text-gold { color: hsl(var(--gold)); }
.uppercase { text-transform: uppercase; }
.w-full { width: 100%; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 0.5rem; }

/* ---------- Skeleton loader ---------- */
.skeleton-page {
    min-height: 100vh;
    background: hsl(var(--background));
}

.skeleton-shimmer {
    position: relative;
    overflow: hidden;
    background: hsl(14 30% 21%);
}

.skeleton-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

.sk-header {
    height: 120px;
    border-radius: 0 0 0 0;
}

.sk-banner {
    height: 190px;
    margin: 0.75rem 1rem 0;
    border-radius: 1rem;
}

.sk-row {
    height: 100px;
    margin: 0.75rem 1rem 0;
    border-radius: 1rem;
}

.sk-card {
    height: 280px;
    margin: 1rem 1rem 0;
    border-radius: 1.5rem;
}

.sk-cta {
    position: fixed;
    bottom: 2rem;
    left: 1rem;
    right: 1rem;
    height: 78px;
    border-radius: 1rem;
    z-index: 40;
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
    .page-content { padding: 2rem; }
    .auth-page { padding: 2rem; }
}

@media (min-width: 768px) {
    .auth-page { max-width: 420px; margin: 0 auto; }
    .page-content, .dashboard-page { max-width: 480px; margin: 0 auto; }
    .app-header, .dashboard-header { padding-left: calc(50% - 240px + 1rem); padding-right: calc(50% - 240px + 1rem); }
}