/* ============================================================
   SkyColor Industries — User Panel Theme (Light · App-style)
   Primary Red #D32F2F · Gold #D4AF37 · Light surfaces
   ============================================================ */

:root {
    --red: #D32F2F;
    --red-dark: #B71C1C;
    --red-glow: rgba(211, 47, 47, .28);
    --gold: #D4AF37;
    --gold-soft: rgba(212, 175, 55, .16);
    --charcoal: #232733;
    --bg: #F4F6FB;
    --bg-2: #FFFFFF;
    --card: #FFFFFF;
    --card-border: #EAEEF5;
    --text: #1C2430;
    --muted: #7C8698;
    --success: #16A34A;
    --danger: #DC2626;
    --warn: #D97706;
    --radius: 18px;
    --radius-sm: 12px;
    --grad-red: linear-gradient(135deg, #E53935 0%, #D32F2F 55%, #B71C1C 100%);
    --grad-gold: linear-gradient(135deg, #F0D878 0%, #D4AF37 50%, #B08D1E 100%);
    --shadow: 0 14px 34px -18px rgba(23, 30, 50, .35);
    --shadow-sm: 0 6px 18px -10px rgba(23, 30, 50, .28);
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Poppins', 'Inter', system-ui, sans-serif;
    background:
        radial-gradient(900px 480px at 85% -5%, rgba(211, 47, 47, .06), transparent 60%),
        radial-gradient(700px 420px at -10% 20%, rgba(212, 175, 55, .07), transparent 55%),
        var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding-bottom: 96px; /* room for bottom nav */
    overflow-x: hidden;
}

main, .app-shell { position: relative; z-index: 1; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); }

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.02em; color: var(--text); }

/* ============ Scrollbar ============ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D4DAE5; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ============ Header (Home: white brand header) ============ */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--card-border);
    padding: 10px 16px;
}
.app-header .brand { display: flex; align-items: center; gap: 10px; }
.app-header .brand img { height: 40px; width: auto; }
.app-header .brand .brand-name {
    font-weight: 800;
    font-size: 17px;
    line-height: 1.05;
    color: var(--red);
}
.app-header .brand small { display: block; color: var(--muted); font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.balance-chip {
    background: var(--gold-soft);
    border: 1px solid rgba(212, 175, 55, .4);
    color: #8a6d1d;
    border-radius: 50rem;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
}
.balance-chip i { margin-right: 4px; color: var(--gold); }
.bell-btn {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--card-border);
    color: var(--text);
    transition: .25s;
    box-shadow: var(--shadow-sm);
}
.bell-btn:hover { color: var(--red); border-color: rgba(211, 47, 47, .4); }
.bell-btn .badge-dot {
    position: absolute;
    top: 6px;
    right: 7px;
    min-width: 16px;
    height: 16px;
    border-radius: 50rem;
    background: var(--grad-red);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    display: grid;
    place-items: center;
    padding: 0 4px;
    box-shadow: 0 0 0 2px #fff;
    animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* ============ Red page header (Plans / Team / Profile / sub pages) ============ */
.page-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--grad-red);
    color: #fff;
    padding: 14px 16px calc(14px + env(safe-area-inset-top));
    box-shadow: 0 10px 26px -12px var(--red-glow);
}
.page-header .ph-row { display: flex; align-items: center; gap: 12px; max-width: 1120px; margin: 0 auto; }
.page-header .ph-title { flex: 1; text-align: center; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .3px; }
.page-header .ph-left, .page-header .ph-right { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; }
.page-header .ph-right { justify-content: flex-end; }
.page-header .ph-icon-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border: 0;
    font-size: 15px;
    transition: .2s;
}
.page-header .ph-icon-btn:hover { background: rgba(255, 255, 255, .28); color: #fff; }
.page-header .ph-icon-btn .badge-dot {
    position: absolute; top: 4px; right: 4px;
    min-width: 15px; height: 15px; border-radius: 50rem;
    background: #fff; color: var(--red); font-size: 9px; font-weight: 800;
    display: grid; place-items: center; padding: 0 3px;
}
/* slide-down search */
.ph-search {
    display: none;
    max-width: 1120px;
    margin: 10px auto 0;
    padding: 0;
}
.ph-search.show { display: block; }
.ph-search input {
    width: 100%;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    padding: 10px 14px 10px 38px;
    font-size: 13.5px;
    outline: none;
}
.ph-search input::placeholder { color: rgba(255, 255, 255, .75); }
.ph-search .fa-magnifying-glass { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.8); font-size: 13px; }

/* ============ Hero / Slider (Home) ============ */
.hero-slider { position: relative; margin: 0; overflow: hidden; padding-bottom: 6px; }
.hero-slider .carousel-item { min-height: 230px; }
.hero-slider img.hero-img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    filter: brightness(.55) saturate(1.05);
}
/* Full-designed banner artwork (own headline/CTA) — no dimming, show the text panel on phones */
.hero-slider img.hero-img-full { filter: none; object-position: center; }
@media (max-width: 767px) {
    .hero-slider img.hero-img-full { height: 280px; object-position: left center; }
}
.hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px 24px;
    background: linear-gradient(100deg, rgba(15, 18, 28, .82) 18%, rgba(15, 18, 28, .28) 62%, transparent 95%);
}
.hero-overlay .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #FFE082;
    margin-bottom: 8px;
}
.hero-overlay h1 { font-size: clamp(22px, 6vw, 36px); font-weight: 800; color: #fff; margin: 0 0 4px; line-height: 1.12; }
.hero-overlay .hero-sub { color: #FFE082; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 16px; }
.hero-overlay p { color: rgba(255, 255, 255, .8); font-size: 13px; margin: 0 0 16px; max-width: 340px; }
.hero-overlay .btn { align-self: flex-start; }
/* Pagination dots below the banner (light background → gray inactive, red active) */
.hero-slider .carousel-indicators {
    position: static;
    margin: 12px 0 0;
    z-index: 2;
}
.hero-slider .carousel-indicators [data-bs-target] {
    width: 8px; height: 8px; border-radius: 50%;
    background: #D4DAE5; border: 0;
    opacity: 1;
}
.hero-slider .carousel-indicators .active { width: 22px; border-radius: 6px; background: var(--red); }

/* ============ Buttons ============ */
.btn-red {
    background: var(--grad-red);
    color: #fff;
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    padding: 10px 22px;
    box-shadow: 0 10px 22px -8px var(--red-glow);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s;
}
.btn-red:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 28px -8px var(--red-glow); filter: brightness(1.06); }
.btn-red:active { transform: translateY(0); }
.btn-gold {
    background: var(--grad-gold);
    color: #3d2f04;
    border: 0;
    border-radius: 12px;
    font-weight: 800;
    padding: 10px 22px;
    box-shadow: 0 10px 22px -10px rgba(212, 175, 55, .55);
    transition: transform .18s ease, box-shadow .18s ease;
}
.btn-gold:hover { color: #2a2003; transform: translateY(-2px); }
.btn-glass {
    background: #fff;
    border: 1px solid var(--card-border);
    color: var(--text);
    border-radius: 12px;
    font-weight: 600;
    padding: 10px 20px;
    box-shadow: var(--shadow-sm);
    transition: .2s;
}
.btn-glass:hover { background: var(--red); color: #fff; border-color: var(--red); }
.btn-icon-square {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--card-border);
    color: var(--text);
    transition: .2s;
}
.btn-icon-square:hover { background: var(--grad-red); color: #fff; border-color: transparent; transform: translateY(-2px); }

/* Download-app pill */
.btn-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #1C2430;
    color: #fff;
    border: 0;
    border-radius: 50rem;
    padding: 9px 18px;
    font-size: 12.5px;
    font-weight: 700;
    box-shadow: 0 10px 20px -10px rgba(28, 36, 48, .55);
    transition: .2s;
}
.btn-download:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
.btn-download i { color: #FFD54F; }
.btn-download:hover i { color: #fff; }

/* ============ Glass card ============ */
.glass {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0 14px;
}
.section-title h2 { font-size: 17px; margin: 0; display: flex; align-items: center; gap: 9px; }
.section-title h2 .tick {
    width: 5px; height: 20px; border-radius: 4px;
    background: var(--grad-red);
    box-shadow: 0 0 12px var(--red-glow);
    display: inline-block;
}
.section-title a.see-all { font-size: 12.5px; font-weight: 700; color: var(--red); }
.section-title a.see-all:hover { text-decoration: underline; }

/* ============ Notice ticker ============ */
.notice-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 16px 0;
    padding: 9px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.notice-bar .notice-label {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    background: var(--grad-red);
    padding: 4px 10px;
    border-radius: 8px;
}
.notice-track { display: flex; gap: 40px; white-space: nowrap; animation: marquee 22s linear infinite; }
.notice-track span { font-size: 12.5px; color: var(--text); }
.notice-track span i { color: var(--red); margin-right: 6px; font-size: 6px; }
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============ Quick actions (Home) ============ */
.quick-card {
    margin: 14px 16px 0;
    padding: 12px 6px 8px;
    border-radius: var(--radius);
    background: #fff;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
}
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 0; }
.quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 4px 10px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 0;
    box-shadow: none;
    transition: .22s;
    color: var(--text);
}
.quick-item:hover { transform: translateY(-3px); color: var(--text); background: #FBFCFE; }
.quick-item .qi-icon {
    width: 46px; height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 19px;
    color: #fff;
    background: var(--grad-red);
    box-shadow: 0 8px 16px -6px var(--red-glow);
}
.quick-item span { font-size: 11.5px; font-weight: 600; }

/* ============ Welcome banner (Home) ============ */
.welcome-card {
    position: relative;
    margin: 12px 16px 0;
    padding: 20px 18px;
    border-radius: 18px;
    background: linear-gradient(120deg, #D32F2F 0%, #A31212 70%, #8f1010 100%);
    color: #fff;
    box-shadow: 0 18px 34px -14px var(--red-glow);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.welcome-card::after {
    content: '';
    position: absolute;
    right: -30px; top: -40px;
    width: 150px; height: 150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 70%);
}
.welcome-card .wc-txt small { display: block; font-size: 11px; color: rgba(255, 255, 255, .8); letter-spacing: .4px; }
.welcome-card .wc-txt strong { font-size: 19px; font-weight: 700; line-height: 1.2; }
.vip-badge {
    flex-shrink: 0;
    background: linear-gradient(135deg, #FFE082, #F9A825);
    color: #5d4000;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 6px 12px;
    border-radius: 50rem;
    box-shadow: 0 6px 14px -4px rgba(249, 168, 37, .6);
    position: relative;
    z-index: 1;
}

/* ============ Stats ============ */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 16px; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
/* Home stats grid — 2 cards */
@media (min-width: 768px) { .stats-grid.sg-2 { grid-template-columns: repeat(2, 1fr); max-width: 480px; margin: 14px auto 0; } }
.stat-card {
    position: relative;
    padding: 14px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: .22s;
}
.stat-card:hover { transform: translateY(-3px); border-color: rgba(211, 47, 47, .35); }
.stat-card .stat-icon {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: grid; place-items: center;
    font-size: 15px;
    margin-bottom: 10px;
    background: var(--gold-soft);
    color: var(--gold);
}
.stat-card .stat-icon.ic-red { background: rgba(211, 47, 47, .12); color: var(--red); }
.stat-card .stat-icon.ic-green { background: rgba(22, 163, 74, .12); color: var(--success); }
.stat-card .stat-icon.ic-blue { background: rgba(37, 99, 235, .12); color: #2563EB; }
.stat-card .stat-icon.ic-purple { background: rgba(124, 58, 237, .12); color: #7C3AED; }
.stat-card .stat-label { font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.stat-card .stat-value { font-size: 16.5px; font-weight: 700; }
.stat-card .stat-value.gold { color: #a9840f; }
.stat-card .stat-value.red { color: var(--red); }
.stat-card .stat-value.green { color: var(--success); }

/* ============ Plan cards ============ */
.plan-grid { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0 16px; }
@media (min-width: 768px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }
.plan-card {
    position: relative;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: .25s;
    display: flex;
    flex-direction: column;
}
.plan-card:hover { transform: translateY(-5px); border-color: rgba(211, 47, 47, .45); box-shadow: 0 22px 40px -18px rgba(211, 47, 47, .3); }
.plan-card .pc-img {
    position: relative;
    height: 150px;
    overflow: hidden;
    background: linear-gradient(135deg, #E8ECF4, #DDE3EF);
}
.plan-card .pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.plan-card:hover .pc-img img { transform: scale(1.07); }
.plan-card .pc-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(20, 24, 36, .55));
}
.plan-card .pc-badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; gap: 6px; }
.plan-card .pc-badges .tag {
    font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    padding: 4px 9px; border-radius: 6px;
}
.tag-featured { background: var(--grad-gold); color: #3d2f04; }
.tag-banner { background: var(--grad-red); color: #fff; }
.tag-cat { background: rgba(15, 18, 28, .62); color: #fff; backdrop-filter: blur(6px); }
.plan-card .pc-price-tag {
    position: absolute;
    bottom: 10px; right: 12px;
    z-index: 2;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    background: rgba(211, 47, 47, .92);
    padding: 5px 12px;
    border-radius: 50rem;
    box-shadow: 0 6px 16px -4px var(--red-glow);
}
.plan-card .pc-body { padding: 14px 15px 15px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan-card .pc-body h3 { font-size: 15.5px; margin: 0; }
.plan-card .pc-body p.desc {
    font-size: 12px;
    color: var(--muted);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pc-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pc-meta .m {
    background: #F7F9FC;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 7px 6px;
    text-align: center;
}
.pc-meta .m small { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); font-weight: 600; }
.pc-meta .m strong { font-size: 11.5px; }
.pc-meta .m strong.gold { color: #a9840f; }
.pc-meta .m strong.green { color: var(--success); }
.pc-meta .m strong.red { color: var(--red); }
.stock-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--muted); }
.stock-row .progress { flex: 1; min-width: 44px; height: 6px; background: #EEF1F7; border-radius: 4px; }
.stock-row .progress-bar { background: var(--grad-red); border-radius: 4px; }
.stock-row .stock-roi {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 800;
    color: #8a6d1d;
    background: var(--gold-soft);
    border: 1px solid rgba(212, 175, 55, .35);
    border-radius: 50rem;
    padding: 3px 9px;
    white-space: nowrap;
}
.stock-row .stock-left { font-weight: 700; white-space: nowrap; }
.plan-card .pc-body .btn { margin-top: auto; width: 100%; }

/* Featured plan — horizontal row card (Home) */
.feat-row {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 12px;
    margin-bottom: 12px;
    transition: .22s;
}
.feat-row:hover { transform: translateY(-3px); border-color: rgba(211, 47, 47, .4); box-shadow: 0 16px 30px -16px rgba(211,47,47,.3); }
.feat-row .fr-img { flex: 0 0 96px; height: 96px; border-radius: 13px; overflow: hidden; background: linear-gradient(135deg,#E8ECF4,#DDE3EF); }
.feat-row .fr-img img { width: 100%; height: 100%; object-fit: cover; }
.feat-row .fr-body { flex: 1; min-width: 0; }
.feat-row .fr-body h4 { font-size: 14.5px; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feat-row .fr-body .fr-daily { font-size: 12px; color: var(--muted); }
.feat-row .fr-body .fr-daily strong { color: var(--red); font-size: 13.5px; }
.feat-row .fr-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.feat-row .fr-foot .fr-inv { font-size: 11px; color: var(--muted); }
.feat-row .fr-foot .fr-inv strong { color: var(--text); font-size: 12px; }
.feat-row .fr-foot .btn { padding: 8px 16px; font-size: 12px; margin-left: auto; }

/* ============ Tabs ============ */
.plan-tabs, .level-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 16px 14px;
    scrollbar-width: none;
}
.plan-tabs::-webkit-scrollbar, .level-tabs::-webkit-scrollbar { display: none; }
.plan-tabs .tab-pill, .level-tabs .tab-pill {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 50rem;
    font-size: 12.5px;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--card-border);
    color: var(--muted);
    cursor: pointer;
    transition: .2s;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}
.plan-tabs .tab-pill:hover, .level-tabs .tab-pill:hover { color: var(--text); border-color: rgba(211, 47, 47, .35); }
.plan-tabs .tab-pill.active, .level-tabs .tab-pill.active {
    background: var(--grad-red);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px -6px var(--red-glow);
}

/* ============ Forms ============ */
.form-label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .4px; }
.form-control, .form-select {
    background: #fff;
    border: 1px solid var(--card-border);
    color: var(--text);
    border-radius: 12px;
    padding: 11px 14px;
    font-size: 14px;
    transition: .2s;
}
.form-control:focus, .form-select:focus {
    background: #fff;
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(211, 47, 47, .14);
    color: var(--text);
}
.form-control::placeholder { color: #A9B1C0; }
.form-select option { background: #fff; color: var(--text); }
.input-group-text {
    background: #F7F9FC;
    border: 1px solid var(--card-border);
    color: var(--red);
    border-radius: 12px 0 0 12px;
}
.input-group .form-control { border-radius: 0 12px 12px 0; }
.form-check-input:checked { background-color: var(--red); border-color: var(--red); }
.form-text { color: var(--muted); font-size: 11.5px; }

/* ============ Tables ============ */
.table-wrap { overflow-x: auto; }
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    margin: 0;
    font-size: 13px;
}
.table > :not(caption) > * > * {
    background: transparent;
    border-bottom: 1px solid var(--card-border);
    padding: 11px 12px;
    vertical-align: middle;
    white-space: nowrap;
}
.table thead th {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    font-weight: 700;
    background: #F7F9FC;
}
.table tbody tr:hover > * { background: #FAFBFE; }

/* ============ Badges ============ */
.badge-soft { font-size: 10.5px; font-weight: 700; padding: 5px 10px; border-radius: 50rem; }
.badge-pending { background: rgba(217, 119, 6, .12); color: var(--warn); border: 1px solid rgba(217, 119, 6, .3); }
.badge-approved, .badge-active, .badge-completed, .badge-verified, .badge-transferred { background: rgba(22, 163, 74, .12); color: var(--success); border: 1px solid rgba(22, 163, 74, .3); }
.badge-rejected, .badge-suspended, .badge-expired, .badge-inactive { background: rgba(220, 38, 38, .12); color: var(--danger); border: 1px solid rgba(220, 38, 38, .3); }
.badge-processing, .badge-pending-kyc { background: rgba(37, 99, 235, .1); color: #2563EB; border: 1px solid rgba(37, 99, 235, .3); }

/* ============ Bottom navigation ============ */
.bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1040;
    display: flex;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--card-border);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px -14px rgba(23, 30, 50, .25);
}
.bottom-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 0;
    color: #9AA3B2;
    font-size: 10px;
    font-weight: 600;
    border-radius: 12px;
    transition: .2s;
    position: relative;
}
.bottom-nav a i { font-size: 19px; transition: .2s; }
.bottom-nav a.active { color: var(--red); font-weight: 700; }
.bottom-nav a.active i {
    color: #fff;
    background: var(--grad-red);
    width: 46px; height: 30px;
    border-radius: 50rem;
    display: grid;
    place-items: center;
    font-size: 16px;
    box-shadow: 0 8px 18px -6px var(--red-glow);
    transform: translateY(-6px);
}
.bottom-nav a.active::after {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--red);
    position: absolute;
    bottom: 3px;
}
.bottom-nav a:hover { color: var(--red); }

/* ============ Auth pages ============ */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    position: relative;
}
.auth-bg {
    position: fixed;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(244, 246, 251, .96)),
        url('../img/banner-1.svg') center/cover no-repeat;
    z-index: 0;
}
.auth-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 30px 24px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--card-border);
    box-shadow: 0 30px 70px -24px rgba(23, 30, 50, .35);
}
.auth-card .logo-row { text-align: center; margin-bottom: 20px; }
.auth-card .logo-row img { height: 46px; }
.auth-card h1 { font-size: 21px; text-align: center; margin-bottom: 4px; }
.auth-card .sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.auth-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 18px;
    height: 120px;
}
.auth-banner img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); }
.auth-banner .ab-text {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    justify-content: center; padding: 14px 18px;
    background: linear-gradient(90deg, rgba(15, 18, 28, .85), transparent);
}
.auth-banner .ab-text strong { color: #fff; font-size: 15px; }
.auth-banner .ab-text span { color: #FFE082; font-size: 11.5px; }

/* ============ Utility ============ */
.min-width-0 { min-width: 0; }

/* ============ Team page (OLA-style lime design) ============ */
/* Team page uses the app's red/white/black theme (admin-configurable via theme_primary) */
.team-page { --lime: var(--red); --lime-deep: var(--red-dark); --lime-dark: var(--red-dark); --lime-ink: #1C2430; --lime-soft: rgba(211, 47, 47, .1); }

/* --- Dark team app bar --- */
.team-bar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: linear-gradient(180deg, #171B24, #10131A);
    color: #fff;
    padding: 12px 14px calc(12px + env(safe-area-inset-top));
    box-shadow: 0 10px 24px -12px rgba(10, 13, 20, .55);
}
.team-bar-row { display: flex; align-items: center; gap: 10px; max-width: 1120px; margin: 0 auto; }
.tb-title { flex: 1; min-width: 0; text-align: center; line-height: 1.15; }
.tb-title strong { display: block; font-size: 15.5px; font-weight: 700; color: #fff; letter-spacing: .3px; }
.tb-title small { display: block; font-size: 9.5px; color: rgba(255, 255, 255, .55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-right { display: flex; gap: 6px; flex: 0 0 auto; }
.tb-icon {
    position: relative;
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .1);
    border: 0;
    color: #fff;
    font-size: 15px;
    transition: .2s;
}
.tb-icon:hover { background: rgba(255, 255, 255, .2); color: var(--lime); }
.tb-icon .badge-dot {
    position: absolute;
    top: 3px; right: 3px;
    min-width: 15px; height: 15px;
    border-radius: 50rem;
    background: #fff;
    color: var(--red);
    font-size: 9px;
    font-weight: 800;
    display: grid;
    place-items: center;
    padding: 0 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.team-ddm { border-radius: 14px; border: 1px solid var(--card-border); box-shadow: var(--shadow); padding: 6px; min-width: 190px; }
.team-ddm .dropdown-item { border-radius: 9px; font-size: 13px; padding: 8px 12px; }
.team-ddm .dropdown-item:hover { background: var(--lime-soft); color: var(--lime-dark); }
.team-ddm .dropdown-item i { color: var(--lime-dark); }

/* --- Red hero --- */
.ola-hero {
    position: relative;
    height: 185px;
    margin: 0;
    border-radius: 0 0 30px 30px;
    background: var(--grad-red);
    overflow: hidden;
}
.ola-cloud { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.ola-cloud.c1 { width: 210px; height: 64px; top: 18px; left: -50px; transform: rotate(-8deg); }
.ola-cloud.c2 { width: 160px; height: 52px; top: 92px; left: 130px; transform: rotate(6deg); }
.ola-cloud.c3 { width: 230px; height: 68px; top: 30px; right: -60px; transform: rotate(9deg); }
.ola-avatars {
    position: absolute;
    left: 0; right: 0;
    bottom: 24px;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.ola-av {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 21px;
    color: #fff;
    border: 3px solid rgba(255, 255, 255, .85);
    box-shadow: 0 10px 20px -8px rgba(120, 20, 20, .4);
    animation: floaty 4s ease-in-out infinite;
}
.ola-av.av-o { background: linear-gradient(160deg, #F9735A, #D32F2F); animation-delay: 0s; }
.ola-av.av-r { background: linear-gradient(160deg, #FF5A5A, #B71C1C); animation-delay: .5s; }
.ola-av.av-g { background: linear-gradient(160deg, #7A1414, #3D0808); animation-delay: 1s; }
.ola-av.av-w { background: linear-gradient(160deg, #2A2F3A, #10131A); animation-delay: 1.5s; }
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* --- Overlapping white card --- */
.ola-card {
    position: relative;
    margin: -52px 16px 0;
    z-index: 2;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 20px;
    box-shadow: 0 22px 44px -20px rgba(28, 36, 48, .35);
    padding: 16px;
    text-align: center;
}
.ola-badge {
    display: inline-grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--lime);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .5px;
    box-shadow: 0 8px 18px -6px var(--red-glow);
    margin-bottom: 8px;
}
.ola-phone { font-size: 23px; font-weight: 800; color: var(--lime-ink); letter-spacing: 1px; line-height: 1.15; }
.ola-label { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ola-amount { font-size: 26px; font-weight: 800; color: var(--lime-dark); line-height: 1.2; }
.ola-mini-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ola-mini {
    background: var(--lime-soft);
    border: 1px solid rgba(211, 47, 47, .3);
    border-radius: 14px;
    padding: 10px 8px;
}
.ola-mini span { display: block; font-size: 10.5px; font-weight: 600; color: var(--red-dark); text-transform: uppercase; letter-spacing: .4px; }
.ola-mini strong { display: block; font-size: 18px; font-weight: 800; color: var(--lime-dark); }

/* --- Level tabs --- */
.ola-tabs { display: flex; gap: 10px; padding: 14px 16px 0; }
.ola-tab {
    flex: 1;
    padding: 11px 0;
    border-radius: 12px 12px 5px 5px;
    border: 1.5px solid var(--lime);
    background: #fff;
    color: #6B7280;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}
.ola-tab:hover:not(.active) { color: var(--lime-dark); background: var(--lime-soft); }
.ola-tab.active {
    background: var(--lime);
    color: #fff;
    border-color: var(--lime);
    box-shadow: 0 10px 20px -8px var(--red-glow);
}

/* --- 2x2 stats grid --- */
.ola-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 0; }
.ola-stat {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 15px;
    padding: 15px 10px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: .22s;
}
.ola-stat:hover { transform: translateY(-3px); border-color: rgba(211, 47, 47, .4); box-shadow: 0 14px 26px -12px var(--red-glow); }
.ola-stat strong { display: block; font-size: 21px; font-weight: 800; color: var(--lime-ink); }
.ola-stat span { font-size: 11px; font-weight: 600; color: var(--muted); }

/* --- Action buttons --- */
.ola-actions { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 0; }
.ola-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 14px;
    border-radius: 13px;
    background: var(--grad-red);
    border: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 10px 22px -8px var(--red-glow);
    transition: .2s;
}
.ola-btn:hover { color: #fff; filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 14px 28px -8px var(--red-glow); }
.ola-btn i { color: #fff; font-size: 14px; }
.ola-btn b { color: #fff; font-size: 12.5px; margin-left: 4px; }
.ola-btn.ola-btn-static { cursor: default; }
.ola-btn.ola-btn-static:hover { transform: none; filter: none; }
.ola-btn.ola-btn-static i { margin-right: 2px; }

/* --- Referral strip --- */
.ola-ref {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 16px 0;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}
.ola-ref-code { flex: 1; min-width: 0; }
.ola-ref-code span { display: block; font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.ola-ref-code code { font-size: 14px; font-weight: 800; color: var(--lime-dark); letter-spacing: 1.5px; }
.ola-ref-copy, .ola-ref-share {
    flex: 0 0 auto;
    width: 36px; height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(211, 47, 47, .4);
    background: var(--lime-soft);
    color: var(--lime-dark);
    display: grid; place-items: center;
    font-size: 14px;
    transition: .2s;
}
.ola-ref-copy:hover, .ola-ref-share:hover { background: var(--lime); color: #fff; }

/* Red active bottom-nav on team pages */
.team-page .bottom-nav a.active { color: var(--red); }
.team-page .bottom-nav a.active i { background: var(--grad-red); color: #fff; box-shadow: 0 8px 18px -6px var(--red-glow); }
.team-page .bottom-nav a.active::after { background: var(--red); }

/* ============ OLA-style Home & Plans (red theme) ============ */

/* --- Banner carousel --- */
.ola-carousel { position: relative; margin: 0 16px; }
.oc-track { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); }
.oc-slide { position: relative; display: none; }
.oc-slide.active { display: block; animation: ocFade .45s ease; }
@keyframes ocFade { from { opacity: 0; } to { opacity: 1; } }
.oc-img { width: 100%; height: 170px; object-fit: cover; display: block; }
.oc-link { position: absolute; inset: 0; z-index: 2; }
.oc-text {
    position: absolute; inset: 0; z-index: 1;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 16px 18px;
    background: linear-gradient(180deg, transparent 40%, rgba(15, 18, 28, .72));
    pointer-events: none;
}
.oc-text h2 { color: #fff; font-size: 17px; margin: 0 0 2px; }
.oc-text p { color: rgba(255, 255, 255, .85); font-size: 12px; margin: 0; }
.oc-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.oc-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #D4DAE5; cursor: pointer; transition: .2s;
}
.oc-dot.active { width: 22px; border-radius: 6px; background: var(--red); box-shadow: 0 4px 10px -2px var(--red-glow); }

/* --- Quick action grid (4 buttons) --- */
.ola-quick {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    margin: 14px 16px 0;
}
.oq-btn {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 16px 6px 13px;
    border-radius: 16px;
    background: var(--grad-red);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    box-shadow: 0 12px 22px -10px var(--red-glow);
    transition: .22s;
}
.oq-btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 30px -12px var(--red-glow); filter: brightness(1.06); }
.oq-btn .oq-icon {
    width: 42px; height: 42px;
    border-radius: 13px;
    display: grid; place-items: center;
    font-size: 18px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
}
.oq-btn .oq-plus {
    position: absolute; top: 10px; right: 10px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    color: var(--red);
    font-size: 8px;
    display: grid; place-items: center;
    box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .3);
}

/* --- Segmented tabs --- */
.ola-seg {
    display: flex; gap: 8px;
    margin: 16px;
    padding: 5px;
    background: #F0F2F7;
    border-radius: 14px;
}
.ola-seg-scroll { overflow-x: auto; scrollbar-width: none; }
.ola-seg-scroll::-webkit-scrollbar { display: none; }
.ola-seg .os-tab {
    flex: 1;
    white-space: nowrap;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #6B7280;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 14px;
    transition: .2s;
}
.ola-seg .os-tab.active {
    background: var(--grad-red);
    color: #fff;
    box-shadow: 0 8px 18px -8px var(--red-glow);
}

/* --- Plan cards v2 (premium · machine background · red accents) --- */
.ola-plans { padding-bottom: 8px; }
.plan-set-item {
    position: relative;
    background: #fff;
    border: 1px solid rgba(211, 47, 47, .18);
    border-radius: 20px;
    box-shadow: 0 14px 30px -18px rgba(23, 30, 50, .35);
    margin-bottom: 16px;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.plan-set-item:hover {
    transform: translateY(-4px);
    border-color: rgba(211, 47, 47, .45);
    box-shadow: 0 24px 44px -20px rgba(211, 47, 47, .32);
}
/* Machine image = full-bleed card header background */
.psi-img {
    position: relative;
    height: 175px;
    margin: 0;
    overflow: hidden;
    background: linear-gradient(135deg, #4A2A2A, #1C2430);
}
.psi-img::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15, 18, 28, .1) 30%, rgba(140, 16, 16, .82) 100%);
    pointer-events: none;
}
.psi-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.plan-set-item:hover .psi-img img { transform: scale(1.06); }
/* Title overlaid on the machine background */
.psi-title {
    position: absolute;
    z-index: 2;
    left: 0; right: 0;
    bottom: 10px;
    margin: 0;
    padding: 0 14px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .3px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.psi-tag {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    background: var(--grad-red);
    color: #fff;
    font-size: 10px; font-weight: 800;
    letter-spacing: .6px; text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 7px;
    box-shadow: 0 6px 14px -4px var(--red-glow);
}
.psi-tag-gold { background: var(--grad-gold); color: #3d2f04; box-shadow: 0 6px 14px -4px rgba(212, 175, 55, .5); }
.psi-name {
    font-size: 16px; font-weight: 700; text-align: left;
    margin: 0;
    padding: 14px 16px 2px;
}
.psi-desc {
    font-size: 12px; color: var(--muted); text-align: left;
    margin: 0;
    padding: 0 16px 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Metrics grid — red-accented boxes */
.psi-metrics {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 16px;
    margin: 0 0 12px;
}
.pm-cell {
    position: relative;
    background: #fff;
    border: 1px solid rgba(211, 47, 47, .18);
    border-radius: 13px;
    padding: 12px 8px 11px;
    text-align: center;
    overflow: hidden;
}
.pm-cell::before {
    content: '';
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 30px; height: 3px;
    border-radius: 0 0 5px 5px;
    background: var(--grad-red);
}
.pm-cell strong { display: block; font-size: 17px; font-weight: 800; }
.pm-cell span { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.pm-cell:nth-child(1) strong { color: var(--red); }
.pm-cell:nth-child(2) strong { color: var(--success); }
.pm-cell:nth-child(3) strong { color: var(--text); }
.pm-cell:nth-child(4) strong { color: #a9840f; }
.psi-stock {
    display: flex; align-items: center; gap: 10px;
    margin: 0;
    padding: 0 16px 14px;
    font-size: 11px; color: var(--muted);
}
.psi-stock .progress { flex: 1; height: 6px; background: #EEF1F7; border-radius: 4px; }
.psi-stock .progress-bar { background: var(--grad-red); border-radius: 4px; }
.psi-stock span { white-space: nowrap; font-weight: 600; }
/* Full-width red buy button = card footer */
.psi-btn {
    position: relative;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%;
    padding: 15px;
    border: 0;
    border-radius: 0 0 20px 20px;
    background: var(--grad-red);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .3px;
    transition: filter .2s ease;
}
.psi-btn::after {
    content: '';
    position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
    transform: skewX(-20deg);
    transition: left .5s ease;
}
.psi-btn:hover { color: #fff; filter: brightness(1.07); }
.psi-btn:not(:disabled):hover::after { left: 135%; }
.psi-btn:disabled { background: #DDE1EA; color: #9AA3B2; filter: none; cursor: not-allowed; }

/* Global red-CTA shine sweep (buttons) */
.btn-red, .ola-btn, .oq-btn, .btn-download {
    position: relative;
    overflow: hidden;
}
.btn-red::after, .ola-btn::after, .oq-btn::after, .btn-download::after {
    content: '';
    position: absolute; top: 0; left: -70%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-20deg);
    transition: left .5s ease;
    pointer-events: none;
}
.btn-red:hover::after, .ola-btn:hover::after, .oq-btn:hover::after, .btn-download:hover::after { left: 135%; }

/* ============ Team page ============ */
.team-hero {
    position: relative;
    margin: 0 16px 12px;
    border-radius: 18px;
    overflow: hidden;
    min-height: 150px;
    background: linear-gradient(120deg, #1C2430, #2a3140 60%, #3a1c1c);
    box-shadow: 0 16px 30px -16px rgba(20, 24, 36, .5);
}
.team-hero img.th-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.team-hero .th-content { position: relative; padding: 24px 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.team-hero .th-text h3 { color: #fff; font-size: 20px; margin: 0 0 4px; }
.team-hero .th-text p { color: #FFE082; font-size: 13px; font-weight: 700; margin: 0; letter-spacing: .5px; }
.th-avatars { display: flex; }
.th-avatars .th-av {
    width: 34px; height: 34px; border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -8px;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 800; color: #fff;
    background: var(--grad-red);
}
.th-avatars .th-av:first-child { margin-left: 0; background: linear-gradient(135deg,#7C3AED,#4C1D95); }
.th-avatars .th-av:nth-child(2) { background: linear-gradient(135deg,#0EA5E9,#1D4ED8); }
.th-avatars .th-av:nth-child(3) { background: linear-gradient(135deg,#16A34A,#15803D); }

.ref-card { margin: 0 16px 12px; padding: 18px; background: #fff; border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow-sm); }
.ref-card .rc-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 8px; }
.ref-code-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F7F9FC;
    border: 1px dashed rgba(211, 47, 47, .4);
    border-radius: 12px;
    padding: 10px 14px;
}
.ref-code-box code { font-size: 16px; font-weight: 800; color: var(--red); flex: 1; letter-spacing: 2px; }
.ref-code-box .btn-icon-square { width: 38px; height: 38px; }

.team-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 16px 14px; }
@media (max-width: 360px) { .team-stat-grid { grid-template-columns: repeat(2, 1fr); } }
.team-stat {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 12px 8px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.team-stat .ts-icon { font-size: 16px; color: var(--red); margin-bottom: 4px; }
.team-stat strong { display: block; font-size: 15.5px; font-weight: 800; }
.team-stat span { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

/* level cards (stats row on team) */
.level-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px; }
.level-card {
    text-align: center;
    padding: 16px 10px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
    transition: .2s;
}
.level-card:hover { transform: translateY(-3px); border-color: rgba(211, 47, 47, .4); }
.level-card .lv {
    width: 40px; height: 40px;
    margin: 0 auto 8px;
    border-radius: 50%;
    display: grid; place-items: center;
    font-weight: 800; font-size: 15px;
    color: #fff;
}
.level-card .lv.lv1 { background: var(--grad-red); }
.level-card .lv.lv2 { background: linear-gradient(135deg, #7C3AED, #4C1D95); }
.level-card .lv.lv3 { background: var(--grad-gold); color: #3d2f04; }
.level-card h4 { font-size: 13.5px; margin: 0 0 2px; }
.level-card p { font-size: 11px; color: var(--muted); margin: 0 0 6px; }
.level-card .lv-count { font-size: 18px; font-weight: 800; color: var(--red); }

/* member rows (team table) */
.member-cell { display: flex; align-items: center; gap: 10px; }
.member-cell .mc-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.member-cell .mc-av img { width: 100%; height: 100%; object-fit: cover; }
.member-cell .mc-name { font-size: 13px; font-weight: 600; line-height: 1.2; }
.member-cell .mc-code { font-size: 10.5px; color: var(--muted); }
.comm-pos { color: var(--success); font-weight: 700; }

/* ============ Profile ============ */
.profile-photo-strip {
    position: relative;
    height: 150px;
    background: linear-gradient(160deg, #B71C1C, #8f1010 55%, #4a0e0e);
    overflow: hidden;
}
.profile-photo-strip img { width: 100%; height: 100%; object-fit: cover; opacity: .4; }
.profile-photo-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, var(--bg) 100%);
}
.user-card-float {
    position: relative;
    margin: -58px 16px 0;
    z-index: 2;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 20px;
    box-shadow: 0 20px 40px -18px rgba(23, 30, 50, .4);
    padding: 18px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
}
.user-card-float .uc-avatar { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 8px 18px -6px var(--red-glow); }
.user-card-float .uc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-card-float .uc-name { font-size: 16.5px; font-weight: 700; line-height: 1.2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-card-float .uc-id { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.user-card-float .uc-id code { background: #F7F9FC; border: 1px solid var(--card-border); border-radius: 8px; padding: 2px 8px; font-size: 11px; color: var(--red); font-weight: 700; }

/* balance cards (profile) */
.balance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px 16px 0; }
.balance-card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 15px;
    padding: 14px;
    box-shadow: var(--shadow-sm);
    transition: .22s;
}
.balance-card:hover { transform: translateY(-3px); }
.balance-card .bc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.balance-card .bc-top .bc-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 13px; }
.balance-card .bc-top .bc-icon.g { background: rgba(22,163,74,.12); color: var(--success); }
.balance-card .bc-top .bc-icon.r { background: rgba(211,47,47,.12); color: var(--red); }
.balance-card .bc-top .bc-icon.gold { background: var(--gold-soft); color: #a9840f; }
.balance-card .bc-top .bc-icon.b { background: rgba(37,99,235,.12); color: #2563EB; }
.balance-card .bc-top span { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.balance-card strong { font-size: 16px; font-weight: 800; }

/* menu list (profile) */
.menu-section { padding: 0 16px; }
.menu-list { background: #fff; border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden; }
.menu-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--card-border);
    color: var(--text);
    transition: .18s;
    position: relative;
}
.menu-item:last-child { border-bottom: 0; }
.menu-item:hover { background: #FafBFE; color: var(--red); }
.menu-item .mi-icon {
    width: 38px; height: 38px;
    border-radius: 11px;
    display: grid; place-items: center;
    font-size: 15px;
    background: #F7F9FC;
    color: var(--red);
    border: 1px solid var(--card-border);
    transition: .2s;
}
.menu-item:hover .mi-icon { background: var(--grad-red); color: #fff; border-color: transparent; }
.menu-item span { flex: 1; font-size: 13.5px; font-weight: 500; }
.menu-item .mi-chev { color: #C3CAD6; font-size: 13px; }
.menu-item .mi-badge {
    background: var(--grad-red);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    border-radius: 50rem;
    display: grid;
    place-items: center;
    padding: 0 6px;
    box-shadow: 0 6px 14px -4px var(--red-glow);
}

/* Profile quick menu (4 buttons) */
.profile-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 16px;
}
.profile-menu-grid .pm-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    transition: .22s;
    min-width: 0;
}
.profile-menu-grid .pm-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(211, 47, 47, .4);
    color: var(--text);
    box-shadow: 0 14px 28px -14px rgba(211, 47, 47, .3);
}
.profile-menu-grid .pm-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: #fff;
    background: var(--grad-red);
    box-shadow: 0 8px 16px -6px var(--red-glow);
}
.profile-menu-grid .pm-label {
    flex: 1;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    min-width: 0;
}
.profile-menu-grid .pm-chev { color: #C3CAD6; font-size: 12px; flex-shrink: 0; }

/* Profile logout */
.profile-logout { padding: 6px 16px 4px; }
.btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    border-radius: 13px;
    background: #fff;
    border: 1px solid rgba(220, 38, 38, .35);
    color: var(--danger);
    font-weight: 700;
    font-size: 13.5px;
    box-shadow: var(--shadow-sm);
    transition: .2s;
}
.btn-logout:hover { background: var(--danger); color: #fff; border-color: var(--danger); transform: translateY(-2px); }

/* legacy profile bits */
.profile-hero { text-align: center; padding: 26px 18px 22px; }
.profile-hero .avatar {
    width: 92px; height: 92px;
    margin: 0 auto 12px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--gold);
    box-shadow: 0 14px 34px -10px var(--red-glow);
}
.profile-hero .avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero h3 { margin: 0; font-size: 19px; }
.profile-hero .uid { font-size: 12px; color: var(--muted); }
.profile-hero .uid code { color: var(--red); }
.info-list .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--card-border);
    font-size: 13.5px;
}
.info-list .info-item:last-child { border-bottom: 0; }
.info-list .info-item .k { color: var(--muted); display: flex; align-items: center; gap: 9px; }
.info-list .info-item .k i { color: var(--red); width: 18px; text-align: center; }
.info-list .info-item .v { font-weight: 600; text-align: right; }
.history-tabs { display: flex; gap: 8px; padding: 0 16px 14px; overflow-x: auto; scrollbar-width: none; }
.history-tabs::-webkit-scrollbar { display: none; }

/* ============ Misc ============ */
.flash-wrap { padding: 12px 16px 0; }
.flash-wrap .alert { border-radius: 13px; font-size: 13px; border: 0; }
.alert-red { background: rgba(220, 38, 38, .1); color: #b91c1c; border: 1px solid rgba(220, 38, 38, .25); }
.alert-gold { background: rgba(212, 175, 55, .12); color: #8a6d1d; border: 1px solid rgba(212, 175, 55, .35); }
.alert-green { background: rgba(22, 163, 74, .1); color: #15803d; border: 1px solid rgba(22, 163, 74, .25); }

.empty-state { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty-state i { font-size: 40px; color: var(--red); opacity: .35; display: block; margin-bottom: 12px; }
.empty-state p { margin: 0; font-size: 13.5px; }

.notif-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--card-border);
    transition: .2s;
}
.notif-item:hover { background: #FAFBFE; }
.notif-item .n-icon {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 11px;
    display: grid; place-items: center;
    background: var(--gold-soft);
    color: #a9840f;
}
.notif-item .n-body { flex: 1; }
.notif-item .n-body h5 { font-size: 13.5px; margin: 0 0 3px; }
.notif-item .n-body p { font-size: 12.5px; color: var(--muted); margin: 0 0 4px; }
.notif-item .n-body time { font-size: 10.5px; color: #A9B1C0; }
.notif-item.unread { background: rgba(211, 47, 47, .05); }
.notif-item.unread h5 { color: var(--red); }
.notif-item.unread .n-dot {
    width: 8px; height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 10px var(--red-glow);
    flex-shrink: 0;
}

.page-banner {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin: 14px 16px 6px;
    height: 130px;
}
.page-banner img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); }
.page-banner .pb-text {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(15, 18, 28, .85), transparent);
}
.page-banner .pb-text h2 { color: #fff; font-size: 19px; margin: 0 0 3px; }
.page-banner .pb-text p { color: rgba(255, 255, 255, .8); font-size: 12px; margin: 0; }

/* Announcement strip (home top) */
.announce-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 16px 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: linear-gradient(120deg, #D32F2F 0%, #A31212 70%, #8f1010 100%);
    color: #fff;
    box-shadow: 0 12px 24px -12px var(--red-glow);
    text-decoration: none;
    transition: .22s;
    position: relative;
    overflow: hidden;
}
.announce-strip::after {
    content: '';
    position: absolute;
    right: -28px; top: -40px;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%);
}
.announce-strip:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -12px var(--red-glow); }
.announce-strip .as-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 16px;
    color: #5d4000;
    background: linear-gradient(135deg, #FFE082, #F9A825);
    box-shadow: 0 6px 14px -4px rgba(249, 168, 37, .6);
}
.announce-strip .as-text { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; z-index: 1; }
.announce-strip .as-text strong { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.announce-strip .as-text em { font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, .85); }
.announce-strip .as-chev { color: rgba(255, 255, 255, .7); font-size: 12px; position: relative; z-index: 1; }

/* Long homepage banner (replaces the Welcome/VIP card) */
.long-banner {
    position: relative;
    margin: 14px 16px 0;
    border-radius: 18px;
    overflow: hidden;
    height: 190px;
    background: linear-gradient(135deg, #1C2430, #3a1c1c);
    box-shadow: 0 16px 30px -16px rgba(20, 24, 36, .5);
}
.long-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: brightness(.85);
    transition: transform .5s ease;
}
.long-banner:hover img { transform: scale(1.03); }
.long-banner .lb-img-full { filter: none; object-position: left center; }
.long-banner .lb-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 20px;
    background: linear-gradient(90deg, rgba(15, 18, 28, .85), transparent);
}
.long-banner .lb-text h2 { color: #fff; font-size: 19px; margin: 0 0 3px; }
.long-banner .lb-text p { color: rgba(255, 255, 255, .8); font-size: 12px; margin: 0 0 6px; }
.long-banner .btn { position: relative; z-index: 3; }
.long-banner-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 18px;
}

/* Mid-page promo banner (home) */
.page-banner.promo-banner { height: 172px; }
.page-banner.promo-banner img { filter: brightness(.5) saturate(1.05); }
.page-banner.promo-banner .pb-text {
    padding: 18px 22px;
    background: linear-gradient(90deg, rgba(15, 18, 28, .94) 18%, rgba(15, 18, 28, .6) 62%, rgba(15, 18, 28, .3) 100%);
}
.page-banner.promo-banner .pb-text h2 { font-size: 21px; margin-bottom: 5px; text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.page-banner.promo-banner .pb-text p { font-size: 12.5px; max-width: 78%; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.page-banner.promo-banner .btn { font-size: 11.5px; padding: 7px 16px; }

.pill-btn-row { display: flex; gap: 10px; padding: 16px; flex-wrap: wrap; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; }

/* invest confirm modal */
.confirm-box { text-align: center; padding: 8px 4px; }
.confirm-box .c-price { font-size: 30px; font-weight: 800; color: var(--red); }
.confirm-box .c-plan { color: var(--muted); font-size: 13px; }
.confirm-box .c-rows { margin-top: 16px; text-align: left; }
.confirm-box .c-rows .cr {
    display: flex; justify-content: space-between;
    padding: 9px 12px;
    border-radius: 10px;
    background: #F7F9FC;
    margin-bottom: 6px;
    font-size: 13px;
}
.confirm-box .c-rows .cr span:first-child { color: var(--muted); }
.confirm-box .c-rows .cr strong { color: var(--text); }

.qr-box { display: inline-block; padding: 10px; border-radius: 14px; background: #fff; }
.qr-box img { width: 140px; height: 140px; display: block; }

/* ============ Animations ============ */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fadeUp .5s ease both; }
.d-1 { animation-delay: .05s; } .d-2 { animation-delay: .12s; } .d-3 { animation-delay: .19s; }
.d-4 { animation-delay: .26s; } .d-5 { animation-delay: .33s; } .d-6 { animation-delay: .4s; }

/* ============ Responsive containers ============ */
.app-container { max-width: 1120px; margin: 0 auto; padding: 0; }

@media (min-width: 992px) {
    .plan-card .pc-img { height: 180px; }
}

/* ============================================================
   Onboarding / gallery / news / faq / contact / calculator /
   wallet / transactions / team-history / support
   ============================================================ */

/* ---------- Auth header nav (public pages) ---------- */
.auth-header { position: relative; }
.auth-nav .auth-nav-link {
    font-size: 12px; color: var(--muted); padding: 6px 8px;
    border-radius: 10px; transition: all .2s;
    text-decoration: none;
}
.auth-nav .auth-nav-link:hover { color: var(--red); background: rgba(211, 47, 47, .08); }
@media (max-width: 480px) {
    .auth-nav { display: none !important; }
}

/* ---------- Onboarding / splash ---------- */
.onboard-wrap {
    min-height: 100dvh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; padding: 40px 24px 80px;
    text-align: center; background: radial-gradient(1200px 600px at 50% -10%, rgba(211, 47, 47, .1), transparent 60%), var(--bg);
}
.onboard-splash, .onboard-slides { width: 100%; max-width: 420px; animation: fadeUp .6s ease both; }
.splash-logo img { width: 110px; height: auto; margin-bottom: 18px; filter: drop-shadow(0 10px 24px rgba(211, 47, 47, .25)); }
.onboard-splash h1 { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
.onboard-splash p { color: var(--muted); font-size: 14px; margin-bottom: 26px; }
.splash-ring {
    width: 132px; height: 132px; margin: 0 auto 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px dashed rgba(211, 47, 47, .4);
    animation: spinSlow 14s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
.splash-spin {
    width: 92px; height: 92px; border-radius: 50%;
    background: var(--grad-red); color: #fff; font-size: 34px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 16px 40px -10px var(--red-glow);
}
.splash-btn { padding: 14px 44px; border-radius: 60px; font-weight: 700; font-size: 15px; }
.splash-skip, .onboard-skip { display: block; margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.splash-skip a, .onboard-skip a { color: var(--muted); text-decoration: none; }
.splash-skip a:hover, .onboard-skip a:hover { color: var(--red); }

.slide { display: none; }
.slide.active { display: block; animation: fadeUp .5s ease both; }
.slide-img {
    width: 120px; height: 120px; margin: 0 auto 22px; border-radius: 34px;
    background: var(--grad-red); color: #fff; font-size: 44px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 18px 44px -12px var(--red-glow);
}
.slide h2 { font-size: 22px; font-weight: 800; margin-bottom: 10px; }
.slide p { color: var(--muted); font-size: 14px; line-height: 1.75; margin-bottom: 26px; }
.onboard-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; }
.onboard-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(28, 36, 48, .18); transition: all .3s; }
.onboard-dots .dot.active { width: 26px; border-radius: 6px; background: var(--red); }
.onboard-btn { padding: 13px 38px; border-radius: 60px; font-weight: 700; font-size: 15px; }

/* ---------- Info / public pages ---------- */
.info-page { padding: 26px 0 10px; }
.info-head { text-align: center; padding: 6px 24px 22px; }
.info-head h1 { font-size: 24px; font-weight: 800; }
.info-head p { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.info-list-ul { padding-left: 6px; margin: 0; list-style: none; }
.info-list-ul li { position: relative; padding-left: 22px; margin-bottom: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.info-list-ul li::before { content: '\f0da'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 2px; top: 0; color: var(--red); }
.info-list-ul strong { color: var(--text); }

/* ---------- Gallery ---------- */
.gallery-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .gallery-mosaic { grid-template-columns: repeat(3, 1fr); } }
.g-item { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.g-item:hover img { transform: scale(1.08); }
.lightbox {
    position: fixed; inset: 0; z-index: 3000; background: rgba(10, 14, 20, .94);
    display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none;
    transition: opacity .25s;
}
.lightbox.show { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 92%; max-height: 82vh; border-radius: 14px; }
.lb-close {
    position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%;
    border: none; background: rgba(255, 255, 255, .12); color: #fff; font-size: 18px;
}

/* ---------- News ---------- */
.news-card { display: flex; gap: 14px; align-items: flex-start; }
.news-date {
    flex: 0 0 auto; width: 54px; text-align: center; border-radius: 14px;
    background: var(--grad-red); color: #fff; padding: 8px 0; box-shadow: 0 10px 22px -10px var(--red-glow);
}
.news-date .d { display: block; font-size: 20px; font-weight: 800; line-height: 1; }
.news-date .m { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; opacity: .85; }
.news-body h5 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.news-body p { font-size: 13px; color: var(--muted); line-height: 1.65; margin-bottom: 6px; }

/* ---------- FAQ accordion ---------- */
.faq-item { border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden; }
.faq-q {
    width: 100%; border: none; background: transparent; color: var(--text); text-align: left;
    padding: 16px 18px; font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-chev { color: var(--muted); transition: transform .3s; font-size: 13px; }
.faq-item.open .faq-chev { transform: rotate(180deg); color: var(--red); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item.open .faq-a { max-height: 320px; }
.faq-a p { padding: 0 18px 16px; font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0; }

/* ---------- Contact cards ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .contact-grid { grid-template-columns: repeat(4, 1fr); } }
.contact-card {
    text-decoration: none; border-radius: 18px; padding: 18px 14px;
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    transition: transform .25s, border-color .25s;
}
.contact-card:hover { transform: translateY(-4px); border-color: rgba(211, 47, 47, .35); }
.contact-card strong { font-size: 13.5px; color: var(--text); }
.contact-card small { font-size: 11.5px; color: var(--muted); word-break: break-all; }
.cc-icon { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 20px; }

/* ---------- Calculator ---------- */
.calc-results { border: 1px solid rgba(212, 175, 55, .35); }
.calc-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 4px; border-bottom: 1px dashed var(--card-border); font-size: 13.5px;
}
.calc-row:last-child { border-bottom: none; }
.calc-row span { color: var(--muted); }
.calc-row strong { color: var(--text); }

/* ---------- Wallet / transactions ---------- */
.stat-hint { font-size: 10.5px; color: var(--muted); margin-top: 4px; text-align: center; }
.tx-credit { color: var(--success); font-weight: 700; }
.tx-debit { color: var(--danger); font-weight: 700; }

/* ---------- Support tickets ---------- */
.ticket-reply {
    margin-top: 10px; padding: 10px 12px; border-radius: 12px;
    background: rgba(212, 175, 55, .08); border: 1px solid rgba(212, 175, 55, .3);
}
.ticket-reply p { margin: 4px 0 0; color: var(--text); }

/* ============================================================
   Premium polish — richer cards, gradients & micro-interactions
   ============================================================ */

/* Gradient ring on balance cards */
.balance-card {
    position: relative;
    background: linear-gradient(160deg, #FFFFFF 55%, #FFF7F7 100%);
    border: 1px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 10px 26px -14px rgba(211, 47, 47, .25);
}
.balance-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 15px;
    padding: 1.5px;
    background: linear-gradient(135deg, rgba(211, 47, 47, .35), rgba(212, 175, 55, .25), transparent 70%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.balance-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 16px 32px -14px rgba(211, 47, 47, .35); }
.balance-card strong { transition: color .2s; }
.balance-card:hover strong { color: var(--red); }

/* Premium shimmer on VIP badge */
.vip-badge {
    position: relative;
    overflow: hidden;
}
.vip-badge::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: shimmer 2.6s infinite;
}
@keyframes shimmer {
    0% { left: -80%; }
    60%, 100% { left: 130%; }
}

/* Floating user card on profile */
.user-card-float { overflow: hidden; }
.user-card-float::after {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(211, 47, 47, .1), transparent 70%);
    pointer-events: none;
}

/* Menu items hover premium */
.menu-item { transition: background .18s, transform .18s, padding .18s; }
.menu-item:hover { padding-left: 20px; background: linear-gradient(90deg, rgba(211, 47, 47, .05), #fff); }
.menu-item .mi-chev { transition: transform .2s; }
.menu-item:hover .mi-chev { transform: translateX(3px); color: var(--red); }

/* Welcome card premium sheen */
.welcome-card::before {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
    animation: shimmer 4.2s infinite;
    pointer-events: none;
}

/* Hero overlay text gradient */
.hero-overlay h1 {
    background: linear-gradient(90deg, #fff 40%, #FFE082);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Quick action icons premium tilt */
.quick-item .qi-icon { transition: transform .25s, box-shadow .25s; }
.quick-item:hover .qi-icon { transform: rotate(-6deg) scale(1.08); box-shadow: 0 12px 22px -6px var(--red-glow); }

/* Plan card premium image hover glow */
.plan-card .pc-img::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(211, 47, 47, .0), rgba(211, 47, 47, .22));
    opacity: 0;
    transition: opacity .3s;
}
.plan-card:hover .pc-img::before { opacity: 1; }

/* Stat/level cards */
.team-stat, .level-card { transition: transform .22s, box-shadow .22s; }
.team-stat:hover, .level-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px -14px rgba(211, 47, 47, .3);
}

/* Premium buttons: gradient border glass */
.btn-glass { position: relative; overflow: hidden; }
.btn-glass::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transition: left .5s;
    pointer-events: none;
}
.btn-glass:hover::after { left: 140%; }

/* Section titles with gradient underline */
.section-title h2 { position: relative; }
.section-title h2::after {
    content: '';
    position: absolute;
    left: 14px; bottom: -7px;
    width: 34px; height: 3px;
    border-radius: 4px;
    background: var(--grad-red);
    opacity: .85;
}

/* Featured rows premium */
.feat-row { position: relative; overflow: hidden; }
.feat-row::after {
    content: '';
    position: absolute;
    right: -30px; bottom: -30px;
    width: 90px; height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, .12), transparent 70%);
    pointer-events: none;
}
.feat-row .fr-img { box-shadow: 0 10px 20px -10px rgba(23, 30, 50, .4); }

/* Buttons micro-lift */
.btn-red, .btn-gold { transition: transform .18s ease, box-shadow .18s ease, filter .18s; }
.btn-red:active, .btn-gold:active { transform: scale(.97); }

/* Page header subtle shine */
.page-header::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
}

/* ============================================================
   Premium Profile / Home upgrades
   ============================================================ */

/* Profile photo strip — premium */
.profile-photo-strip.premium { height: 168px; }
.profile-photo-strip.premium img { opacity: .55; filter: saturate(1.05); }
.profile-photo-strip.premium::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(120, 16, 16, .25), rgba(120, 16, 16, .55));
    z-index: 1;
}
.profile-photo-strip .pps-pattern {
    position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .18), transparent 45%),
                radial-gradient(circle at 15% 85%, rgba(212, 175, 55, .22), transparent 50%);
}
.profile-photo-strip .pps-overlay {
    position: absolute; left: 18px; bottom: 14px; z-index: 2;
}
.profile-photo-strip .pps-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
    color: #FFE082; background: rgba(15, 18, 28, .45);
    border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(6px);
    padding: 5px 12px; border-radius: 50rem;
}

/* Floating user card — premium */
.user-card-float.premium { margin-top: -66px; }
.user-card-float.premium .uc-avatar {
    flex: 0 0 72px; width: 72px; height: 72px;
    border: 3px solid #fff; position: relative;
}
.user-card-float.premium .uc-avatar .uc-ring {
    position: absolute; inset: -7px; border-radius: 50%;
    border: 2px dashed rgba(212, 175, 55, .65);
    animation: spinSlow 16s linear infinite;
}
.user-card-float.premium .uc-name { font-size: 18px; }
.user-card-float .uc-sponsor {
    display: flex; align-items: center; gap: 6px;
    font-size: 11.5px; color: var(--muted); margin-top: 6px;
    background: #F7F9FC; border: 1px solid var(--card-border);
    padding: 4px 10px; border-radius: 50rem; width: fit-content;
}
.user-card-float .uc-sponsor i { color: var(--red); font-size: 10px; }
.user-card-float .uc-sponsor code { font-size: 10.5px; color: var(--red); font-weight: 700; }

/* Profile quick actions */
.profile-actions {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    padding: 16px 16px 0;
}
.profile-actions .pa-item {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 12px 6px 10px; border-radius: 14px;
    background: #fff; border: 1px solid var(--card-border); box-shadow: var(--shadow-sm);
    color: var(--text); font-size: 10.5px; font-weight: 600; transition: .2s;
}
.profile-actions .pa-item:hover { transform: translateY(-3px); border-color: rgba(211, 47, 47, .4); color: var(--text); }
.profile-actions .pa-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; font-size: 16px; color: #fff;
    background: var(--grad-red); box-shadow: 0 8px 16px -6px var(--red-glow);
}

/* Balance hero cards */
.balance-grid.premium { padding-top: 14px; }
.balance-card.hero {
    position: relative; overflow: hidden; color: #fff; border: 0;
    padding: 16px;
}
.balance-card.hero::after {
    content: ''; position: absolute; right: -26px; top: -34px;
    width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .2), transparent 70%);
}
.balance-card.hero.g { background: linear-gradient(135deg, #16A34A, #15803D); box-shadow: 0 14px 26px -12px rgba(22, 163, 74, .55); }
.balance-card.hero.r { background: linear-gradient(135deg, #E53935, #B71C1C); box-shadow: 0 14px 26px -12px var(--red-glow); }
.balance-card.hero .bc-top span { color: rgba(255, 255, 255, .85); }
.balance-card.hero .bc-icon {
    width: 32px; height: 32px; border-radius: 10px;
    background: rgba(255, 255, 255, .2); color: #fff;
    display: grid; place-items: center; font-size: 14px;
}
.balance-card.hero strong { font-size: 19px; display: block; margin: 4px 0 2px; position: relative; z-index: 1; }
.balance-card.hero small { font-size: 10.5px; color: rgba(255, 255, 255, .75); position: relative; z-index: 1; }

/* Stat grid small (4 across, 2 on mobile) */
.stat-grid-sm {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    padding: 12px 16px 0;
}
@media (max-width: 460px) { .stat-grid-sm { grid-template-columns: repeat(2, 1fr); } }
.stat-grid-sm .stat-card { padding: 12px; }
.stat-grid-sm .stat-icon.ic-gold { background: var(--gold-soft); color: #a9840f; }
.stat-grid-sm .stat-card .stat-value { font-size: 14.5px; }
.stat-grid-sm .stat-card .stat-label { font-size: 9.5px; }

/* Company intro (Home) */
.company-intro {
    margin: 0 16px;
    padding: 20px 18px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.company-intro::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: var(--grad-red);
}
.company-intro .ci-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--red); background: rgba(211, 47, 47, .08);
    padding: 5px 11px; border-radius: 50rem; margin-bottom: 10px;
}
.company-intro .ci-top h3 { font-size: 20px; margin: 0 0 8px; line-height: 1.25; }
.company-intro .ci-top p { font-size: 13px; color: var(--muted); line-height: 1.7; margin: 0 0 16px; }
.company-intro .ci-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px;
}
@media (max-width: 460px) { .company-intro .ci-stats { grid-template-columns: repeat(2, 1fr); } }
.company-intro .ci-stat {
    text-align: center; background: #F7F9FC; border: 1px solid var(--card-border);
    border-radius: 12px; padding: 12px 6px;
}
.company-intro .ci-stat strong { display: block; font-size: 17px; font-weight: 800; color: var(--red); }
.company-intro .ci-stat span { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.company-intro .ci-feats {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.company-intro .ci-feats span {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; color: var(--text);
    background: var(--gold-soft); border: 1px solid rgba(212, 175, 55, .35);
    padding: 6px 11px; border-radius: 50rem;
}
.company-intro .ci-feats span i { color: #a9840f; }

/* ---------- About page ---------- */
.why-list { display: flex; flex-direction: column; gap: 14px; }
.why-item { display: flex; gap: 13px; align-items: flex-start; }
.why-item .wi-icon {
    flex: 0 0 40px; width: 40px; height: 40px;
    border-radius: 12px; display: grid; place-items: center;
    font-size: 15px;
}
.why-item .wi-icon.ic-red { background: rgba(211, 47, 47, .1); color: var(--red); }
.why-item .wi-icon.ic-green { background: rgba(22, 163, 74, .1); color: var(--success); }
.why-item .wi-icon.ic-blue { background: rgba(37, 99, 235, .1); color: #2563EB; }
.why-item .wi-icon.ic-gold { background: var(--gold-soft); color: #a9840f; }
.why-item strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.why-item small { font-size: 12.5px; color: var(--muted); line-height: 1.55; }

.about-contact { display: flex; flex-direction: column; gap: 6px; }
.ac-row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px; border-radius: 12px;
    background: #F7F9FC; border: 1px solid var(--card-border);
    font-size: 13px; color: var(--text); transition: .2s;
}
.ac-row i { width: 18px; text-align: center; color: var(--red); }
.ac-row.ac-link:hover { border-color: rgba(211, 47, 47, .35); color: var(--red); transform: translateY(-1px); }

/* QR modal box */
#qrModal .qr-box { padding: 14px; border-radius: 16px; background: #fff; border: 1px solid var(--card-border); box-shadow: var(--shadow-sm); display: inline-block; }
#qrModal .qr-box img, #qrModal .qr-box canvas { display: block; border-radius: 8px; }

/* ============================================================
   Splash screen (app entry)
   ============================================================ */
.splash-screen {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    background:
        radial-gradient(900px 500px at 80% -10%, rgba(211, 47, 47, .14), transparent 60%),
        radial-gradient(700px 420px at -10% 30%, rgba(212, 175, 55, .12), transparent 55%),
        var(--bg);
}
.splash-screen .splash-logo img {
    width: 96px;
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(0 14px 30px rgba(211, 47, 47, .3));
    animation: fadeUp .6s ease both;
}
.splash-screen h1 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 6px;
    animation: fadeUp .6s .1s ease both;
}
.splash-screen p {
    color: var(--muted);
    font-size: 13.5px;
    margin-bottom: 30px;
    animation: fadeUp .6s .18s ease both;
}
.splash-screen .splash-ring {
    width: 132px;
    height: 132px;
    margin-bottom: 34px;
    border-radius: 50%;
    border: 2px dashed rgba(211, 47, 47, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: spinSlow 14s linear infinite;
}
.splash-screen .splash-spin {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--grad-red);
    color: #fff;
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 40px -10px var(--red-glow);
}
.splash-loader { display: flex; gap: 8px; }
.splash-loader span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--red);
    opacity: .25;
    animation: splashBounce 1.1s ease-in-out infinite;
}
.splash-loader span:nth-child(2) { animation-delay: .15s; }
.splash-loader span:nth-child(3) { animation-delay: .3s; }
@keyframes splashBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .25; }
    30% { transform: translateY(-8px); opacity: 1; }
}

/* ============================================================
   Recharge / Withdrawal success timeline
   ============================================================ */
.status-hero .status-ic {
    width: 82px;
    height: 82px;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 36px;
    color: #fff;
    box-shadow: 0 16px 34px -12px rgba(23, 30, 50, .35);
}
.status-ic.pending { background: linear-gradient(135deg, #F0B429, #D97706); animation: pulse-dot 2s infinite; }
.status-ic.done { background: linear-gradient(135deg, #22C55E, #15803D); }
.status-ic.fail { background: linear-gradient(135deg, #EF4444, #B91C1C); }

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
    padding-bottom: 22px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 38px;
    bottom: -2px;
    width: 2px;
    background: var(--card-border);
}
.timeline-item.active:not(:last-child)::before { background: var(--red); }
.timeline-item .tl-dot {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    color: #C3CAD6;
    background: #F1F3F8;
    border: 1px solid var(--card-border);
    z-index: 1;
}
.timeline-item.active .tl-dot {
    background: var(--grad-red);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 16px -6px var(--red-glow);
}
.timeline-item .tl-body { flex: 1; padding-top: 3px; }
.timeline-item .tl-body strong { display: block; font-size: 13.5px; }
.timeline-item .tl-body small { font-size: 11.5px; color: var(--muted); }
.timeline-item .tl-now {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--red);
    background: rgba(211, 47, 47, .1);
    padding: 3px 9px;
    border-radius: 50rem;
    margin-top: 4px;
}

/* Scroll reveal smoother */
[data-aos] { will-change: transform, opacity; }

/* Premium dark download pill glow */
.btn-download { position: relative; overflow: hidden; }
.btn-download::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
    animation: shimmer 3.4s infinite;
}

/* ============================================================
   PREMIUM POLISH — auth orbs, glass cards, micro-interactions
   ============================================================ */

/* ---------- Auth: floating gradient orbs ---------- */
.auth-wrap { overflow: hidden; }
.auth-orb {
    position: fixed;
    border-radius: 50%;
    filter: blur(64px);
    opacity: .5;
    z-index: 0;
    pointer-events: none;
    animation: orbDrift 18s ease-in-out infinite;
}
.auth-orb.orb-1 { width: 340px; height: 340px; background: radial-gradient(circle, rgba(211, 47, 47, .4), transparent 65%); top: -110px; right: -80px; }
.auth-orb.orb-2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(212, 175, 55, .42), transparent 65%); bottom: -90px; left: -90px; animation-delay: -6s; }
.auth-orb.orb-3 { width: 210px; height: 210px; background: radial-gradient(circle, rgba(37, 99, 235, .3), transparent 65%); top: 44%; left: 9%; animation-delay: -12s; }
@keyframes orbDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(26px, -32px) scale(1.12); }
    66% { transform: translate(-20px, 22px) scale(.94); }
}

/* ---------- Premium auth card ---------- */
.premium-card {
    position: relative;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 34px 80px -26px rgba(20, 24, 36, .45);
    overflow: hidden;
}
.premium-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--red), var(--gold), var(--red));
    background-size: 200% 100%;
    animation: barShift 5s linear infinite;
    z-index: 2;
}
@keyframes barShift { to { background-position: 200% 0; } }
.premium-card::after {
    content: '';
    position: absolute;
    top: -90px; right: -90px;
    width: 230px; height: 230px;
    background: radial-gradient(circle, rgba(212, 175, 55, .16), transparent 70%);
    pointer-events: none;
}
.auth-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 auto 12px;
    padding: 5px 14px;
    border-radius: 50rem;
    background: var(--gold-soft);
    border: 1px solid rgba(212, 175, 55, .35);
    color: #8a6d1d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.auth-chip i { color: var(--gold); }
.premium-card .input-group-text {
    background: linear-gradient(135deg, #FFF5F5, #FFFFFF);
    color: var(--red);
    transition: .2s;
}
.premium-card .input-group:focus-within .input-group-text {
    background: var(--grad-red);
    color: #fff;
    border-color: transparent;
}
.premium-card .input-group:focus-within .form-control { border-color: var(--red); }

/* ---------- Social proof strip ---------- */
.auth-proof {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px dashed var(--card-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.ap-avs { display: flex; }
.ap-av {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -9px;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(20, 24, 36, .4);
    background: var(--grad-red);
}
.ap-av:first-child { margin-left: 0; }
.ap-av:nth-child(2) { background: linear-gradient(135deg, #7C3AED, #4C1D95); }
.ap-av:nth-child(3) { background: linear-gradient(135deg, #0EA5E9, #1D4ED8); }
.ap-av:nth-child(4) { background: linear-gradient(135deg, #16A34A, #15803D); }
.auth-proof .ap-txt { text-align: left; }
.auth-proof .ap-txt strong { display: block; font-size: 12.5px; }
.auth-proof .ap-txt span { font-size: 11px; color: var(--muted); }
.auth-proof .ap-stars { color: var(--gold); font-size: 11px; letter-spacing: 2px; }

/* ---------- Button sheen sweep ---------- */
.btn-red { position: relative; overflow: hidden; }
.btn-red::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 45%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    animation: btnSheen 4.5s ease-in-out infinite;
}
@keyframes btnSheen {
    0%, 55% { left: -80%; }
    100% { left: 160%; }
}
.btn-gold { position: relative; overflow: hidden; }
.btn-gold::after {
    content: '';
    position: absolute;
    top: 0; left: -80%;
    width: 45%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .4), transparent);
    transform: skewX(-18deg);
    animation: btnSheen 5s ease-in-out infinite 1.2s;
}

/* ---------- Bottom nav pop ---------- */
.bottom-nav a.active i { animation: navPop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes navPop {
    0% { transform: translateY(-6px) scale(.6); }
    60% { transform: translateY(-9px) scale(1.15); }
    100% { transform: translateY(-6px) scale(1); }
}

/* ---------- Segmented control (Plans filters) ---------- */
.plan-tabs.segmented {
    background: #EDF0F6;
    border-radius: 14px;
    padding: 5px;
    gap: 4px;
    margin-left: 16px;
    margin-right: 16px;
}
.plan-tabs.segmented .tab-pill {
    flex: 1;
    text-align: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--muted);
}
.plan-tabs.segmented .tab-pill.active {
    background: var(--grad-red);
    color: #fff;
    box-shadow: 0 8px 18px -6px var(--red-glow);
}

/* ---------- Hero CTA pulse ---------- */
.hero-overlay .btn-red { animation: ctaPulse 2.8s ease-in-out infinite; }
@keyframes ctaPulse {
    0%, 100% { box-shadow: 0 10px 22px -8px var(--red-glow); }
    50% { box-shadow: 0 10px 36px -8px rgba(211, 47, 47, .55); }
}

/* ---------- Card lift easing ---------- */
.plan-card, .stat-card, .feat-row, .team-stat, .balance-card, .level-card, .quick-item, .menu-item, .notif-item, .method-card {
    transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s, border-color .25s, background .2s;
}

/* ============================================================
   PREMIUM WALLET — recharge / withdraw heroes, chips, methods
   ============================================================ */

/* ---------- Gradient balance hero ---------- */
.wallet-hero {
    position: relative;
    margin: 14px 16px 14px;
    border-radius: 20px;
    padding: 20px 18px 16px;
    color: #fff;
    background: linear-gradient(125deg, #D32F2F 0%, #A31212 60%, #7f0d0d 100%);
    box-shadow: 0 18px 38px -14px var(--red-glow);
    overflow: hidden;
}
.wallet-hero::before {
    content: '';
    position: absolute;
    right: -34px; top: -46px;
    width: 170px; height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
}
.wallet-hero::after {
    content: '';
    position: absolute;
    left: 26px; bottom: -60px;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 130, .16), transparent 70%);
}
.wallet-hero.alt {
    background: linear-gradient(125deg, #B71C1C 0%, #8f1010 55%, #5c0b0b 100%);
}
.wallet-hero .wh-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.wallet-hero .wh-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #FFE082;
    background: rgba(255, 255, 255, .12);
    padding: 5px 12px;
    border-radius: 50rem;
}
.wallet-hero .wh-icon {
    width: 42px; height: 42px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 17px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
}
.wallet-hero .wh-amount {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 0 4px 18px rgba(0, 0, 0, .25);
}
.wallet-hero .wh-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    font-size: 11px;
    color: rgba(255, 255, 255, .85);
}
.wallet-hero .wh-stars { color: #FFE082; font-weight: 700; }

/* ---------- Quick amount chips ---------- */
.amount-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.amount-chips .chip {
    border: 1px solid var(--card-border);
    background: #fff;
    color: var(--text);
    border-radius: 50rem;
    padding: 7px 15px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
    box-shadow: var(--shadow-sm);
}
.amount-chips .chip:hover { border-color: rgba(211, 47, 47, .4); color: var(--red); transform: translateY(-2px); }
.amount-chips .chip.active {
    background: var(--grad-red);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 18px -6px var(--red-glow);
}

/* ---------- Payment method cards ---------- */
.method-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 768px) { .method-grid { grid-template-columns: repeat(4, 1fr); } }
.method-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1.5px solid var(--card-border);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}
.method-card:hover { border-color: rgba(211, 47, 47, .4); transform: translateY(-3px); }
.method-card.selected {
    border-color: var(--red);
    background: rgba(211, 47, 47, .05);
    box-shadow: 0 10px 24px -10px var(--red-glow);
}
.method-card .mc-icon {
    width: 44px; height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: var(--red);
    background: rgba(211, 47, 47, .1);
}
.method-card.selected .mc-icon { background: var(--grad-red); color: #fff; box-shadow: 0 8px 16px -6px var(--red-glow); }
.method-card .mc-name { font-size: 12.5px; font-weight: 700; text-align: center; }
.method-card .mc-check {
    position: absolute;
    top: 8px; right: 8px;
    width: 20px; height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 10px;
    color: #fff;
    background: #D4DAE5;
    opacity: 0;
    transform: scale(.6);
    transition: .2s;
}
.method-card.selected .mc-check { opacity: 1; transform: scale(1); background: var(--grad-red); }

/* ---------- Upload dropzone ---------- */
.upload-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 16px;
    border-radius: 14px;
    border: 2px dashed rgba(211, 47, 47, .35);
    background: rgba(211, 47, 47, .04);
    cursor: pointer;
    text-align: center;
    transition: .2s;
}
.upload-drop:hover { border-color: var(--red); background: rgba(211, 47, 47, .08); }
.upload-drop i { font-size: 30px; color: var(--red); margin-bottom: 2px; }
.upload-drop strong { font-size: 13.5px; }
.upload-drop span { font-size: 11px; color: var(--muted); }

/* ---------- Transaction feed list ---------- */
.txn-list { padding: 4px; }
.txn-item {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 12px;
    border-bottom: 1px solid var(--card-border);
    transition: background .18s;
}
.txn-item:last-child { border-bottom: 0; }
.txn-item:hover { background: #FAFBFE; }
.txn-item .tx-icon {
    flex: 0 0 44px;
    width: 44px; height: 44px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 17px;
}
.txn-item .tx-body { flex: 1; min-width: 0; }
.txn-item .tx-title { font-size: 13.5px; font-weight: 700; }
.txn-item .tx-sub {
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.txn-item .tx-time { font-size: 10.5px; color: #A9B1C0; margin-top: 2px; }
.txn-item .tx-right { text-align: right; flex-shrink: 0; }
.txn-item .tx-amount { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.txn-item .tx-credit { color: var(--success); }
.txn-item .tx-debit { color: var(--danger); }
.txn-item .tx-icon.ic-red { background: rgba(211, 47, 47, .1); color: var(--red); }
.txn-item .tx-icon.ic-blue { background: rgba(37, 99, 235, .1); color: #2563EB; }
.txn-item .tx-icon.ic-green { background: rgba(22, 163, 74, .1); color: var(--success); }
.txn-item .tx-icon.ic-purple { background: rgba(124, 58, 237, .1); color: #7C3AED; }
.txn-item .tx-icon.ic-gold { background: var(--gold-soft); color: #a9840f; }

/* ============================================================
   Profile v2 — About button / elongated menu / detail box / referral
   ============================================================ */

/* User card without the photo strip — sits directly under the header */
.user-card-float.no-strip,
.user-card-float.no-strip.premium { margin: 16px 16px 0; }

/* About → gallery button */
.profile-about { padding: 16px 16px 0; }
.about-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(120deg, #D32F2F 0%, #A31212 70%, #8f1010 100%);
    color: #fff;
    box-shadow: 0 14px 28px -14px var(--red-glow);
    transition: transform .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
}
.about-btn::after {
    content: '';
    position: absolute;
    right: -26px; top: -34px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
    pointer-events: none;
}
.about-btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 34px -14px var(--red-glow); }
.about-btn .ab-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 12px;
    display: grid; place-items: center;
    font-size: 17px; color: #5d4000;
    background: linear-gradient(135deg, #FFE082, #F9A825);
    box-shadow: 0 6px 14px -4px rgba(249, 168, 37, .6);
}
.about-btn .ab-text { flex: 1; font-weight: 700; font-size: 14px; line-height: 1.3; position: relative; z-index: 1; }
.about-btn .ab-text small { display: block; font-weight: 500; font-size: 11px; color: rgba(255, 255, 255, .8); }
.about-btn .ab-chev { color: rgba(255, 255, 255, .75); font-size: 13px; position: relative; z-index: 1; }

/* Settings button (full width under menu) + logo below it */
.profile-settings { padding: 16px 16px 0; }
.menu-full-btn {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 14px 16px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid var(--card-border);
    box-shadow: var(--shadow-sm);
    color: var(--text);
    transition: .22s;
    margin-bottom: 14px;
}
.menu-full-btn:hover { transform: translateY(-3px); border-color: rgba(211, 47, 47, .4); color: var(--text); box-shadow: 0 14px 28px -14px rgba(211, 47, 47, .3); }
.menu-full-btn .mi-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 12px;
    display: grid; place-items: center;
    font-size: 16px; color: #fff;
    background: var(--grad-red);
    box-shadow: 0 8px 16px -6px var(--red-glow);
}
.menu-full-btn > span { flex: 1; font-size: 13.5px; font-weight: 700; }
.menu-full-btn .mi-chev { color: #C3CAD6; font-size: 13px; transition: transform .2s; }
.menu-full-btn:hover .mi-chev { transform: translateX(3px); color: var(--red); }
.profile-logo { text-align: center; padding: 2px 0 6px; }
.profile-logo img { height: 40px; width: auto; opacity: .9; }

/* Financial details — single expandable box */
.detail-box {
    margin: 16px 16px 0;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.detail-box-head {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 15px 16px;
    background: transparent; border: 0; text-align: left;
    color: var(--text); cursor: pointer;
}
.detail-box-head .db-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 12px;
    display: grid; place-items: center;
    font-size: 16px; color: #fff;
    background: var(--grad-red);
    box-shadow: 0 8px 16px -6px var(--red-glow);
}
.detail-box-head .db-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.detail-box-head .db-txt strong { font-size: 14.5px; }
.detail-box-head .db-txt small { font-size: 11px; color: var(--muted); }
.detail-box-head .db-chev {
    color: var(--muted); font-size: 13px;
    transition: transform .3s ease;
    flex-shrink: 0;
}
.detail-box-head.open .db-chev { transform: rotate(180deg); color: var(--red); }
.detail-box-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease, padding .35s ease;
}
.detail-box-body.open { max-height: 560px; }
.detail-box-body .db-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid var(--card-border);
    font-size: 13px;
}
.detail-box-body .db-row span { color: var(--muted); display: flex; align-items: center; gap: 9px; }
.detail-box-body .db-row span i { color: var(--red); width: 16px; text-align: center; font-size: 12px; }
.detail-box-body .db-row strong { font-weight: 700; }
.detail-box-body .db-row strong.green { color: var(--success); }

/* Referral level commission chips */
.ref-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.ref-levels .rl {
    text-align: center;
    background: #F7F9FC;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 10px 6px;
}
.ref-levels .rl span { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 2px; }
.ref-levels .rl strong { font-size: 16px; font-weight: 800; color: var(--red); }

/* ============================================================
   Plans — bigger premium product cards
   ============================================================ */
.plan-grid { gap: 16px; }
.plan-card { border-radius: 22px; box-shadow: 0 10px 24px -12px rgba(23, 30, 50, .28); }
.plan-card:hover { box-shadow: 0 26px 48px -20px rgba(211, 47, 47, .34); }
.plan-card .pc-img { height: 190px; }
.plan-card .pc-price-tag { font-size: 16px; padding: 6px 14px; }
.plan-card .pc-body { padding: 18px 18px 20px; gap: 12px; }
.plan-card .pc-body h3 { font-size: 17.5px; }
.plan-card .pc-body p.desc { font-size: 12.5px; -webkit-line-clamp: 2; }
.pc-meta .m { padding: 9px 8px; }
.pc-meta .m strong { font-size: 12.5px; }
.plan-card .pc-body .btn { padding: 12px 22px; font-size: 13.5px; border-radius: 13px; }
@media (min-width: 992px) { .plan-card .pc-img { height: 220px; } }

/* ============================================================
   Home — FULL-WIDTH top banner (breaks out of the app container)
   ============================================================ */
.hero-slider {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
/* Designed banners (home-banner.png) keep their text panel visible at any width */
.hero-slider img.hero-img-full { object-position: left center; }
/* Taller, more premium banner on large screens */
@media (min-width: 992px) {
    .hero-slider img.hero-img { height: 320px; }
    .hero-slider img.hero-img-full { height: 380px; }
}

/* ============================================================
   Home v3 — top full-width banner / Offers button
   ============================================================ */

/* Top banner replaces the hero slider: edge-to-edge, tall */
.long-banner.home-top-banner {
    margin: 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
    height: 240px;
}
@media (min-width: 992px) {
    .long-banner.home-top-banner { height: 400px; }
}

/* Offers & Updates button (red gradient card) */
.offers-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 16px 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(120deg, #D32F2F 0%, #A31212 70%, #8f1010 100%);
    color: #fff;
    box-shadow: 0 14px 28px -14px var(--red-glow);
    transition: transform .2s, box-shadow .2s;
    position: relative;
    overflow: hidden;
}
.offers-btn::after {
    content: '';
    position: absolute;
    right: -26px; top: -34px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .18), transparent 70%);
    pointer-events: none;
}
.offers-btn:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 18px 34px -14px var(--red-glow); }
.offers-btn .ob-icon {
    flex-shrink: 0;
    width: 42px; height: 42px;
    border-radius: 12px;
    display: grid; place-items: center;
    font-size: 17px; color: #5d4000;
    background: linear-gradient(135deg, #FFE082, #F9A825);
    box-shadow: 0 6px 14px -4px rgba(249, 168, 37, .6);
}
.offers-btn .ob-text { flex: 1; min-width: 0; position: relative; z-index: 1; }
.offers-btn .ob-text strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.offers-btn .ob-text small { display: block; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, .82); }
.offers-btn .ob-chev { color: rgba(255, 255, 255, .75); font-size: 13px; position: relative; z-index: 1; }

/* ============================================================
   Profile — About expandable panel
   ============================================================ */
.about-btn { border: 0; cursor: pointer; text-align: left; }
.about-btn .ab-chev { transition: transform .3s ease; }
.about-btn.open .ab-chev { transform: rotate(180deg); }
.about-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease;
    background: #fff;
    border: 1px solid var(--card-border);
    border-top: 0;
    border-radius: 0 0 16px 16px;
    box-shadow: var(--shadow-sm);
}
.about-panel.open { max-height: 1000px; }
.about-panel .ap-intro { padding: 14px 16px 4px; }
.about-panel .ap-intro h4 { font-size: 15px; margin: 0 0 6px; }
.about-panel .ap-intro h4 span { display: block; font-size: 11px; font-weight: 600; color: var(--red); letter-spacing: .6px; text-transform: uppercase; }
.about-panel .ap-intro p { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 0 0 10px; }
.ap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 6px 16px 0; }
@media (max-width: 460px) { .ap-stats { grid-template-columns: repeat(2, 1fr); } }
.ap-stats .ap-stat {
    text-align: center;
    background: #F7F9FC;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 10px 4px;
}
.ap-stats .ap-stat strong { display: block; font-size: 15px; font-weight: 800; color: var(--red); }
.ap-stats .ap-stat span { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.ap-feats { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; }
.ap-feats span {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 600; color: var(--text);
    background: var(--gold-soft); border: 1px solid rgba(212, 175, 55, .35);
    padding: 5px 10px; border-radius: 50rem;
}
.ap-feats span i { color: #a9840f; }
.ap-contact { padding: 12px 16px 0; display: flex; flex-direction: column; gap: 7px; }
.ap-contact div { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.ap-contact i { color: var(--red); width: 16px; text-align: center; }
.about-panel .btn { margin: 14px 16px 16px; width: calc(100% - 32px); }

/* ============================================================
   Profile v4 — full-width (100%) menu list
   ============================================================ */
.menu-list { width: 100%; }
/* Log Out item — danger tone */
.menu-item.menu-item-danger { color: var(--danger); }
.menu-item.menu-item-danger .mi-icon { background: rgba(220, 38, 38, .12); color: var(--danger); }
.menu-item.menu-item-danger:hover { color: var(--danger); background: rgba(220, 38, 38, .06); }
.menu-item.menu-item-danger:hover .mi-icon { background: var(--danger); color: #fff; }
.menu-item.menu-item-danger:hover .mi-chev { color: var(--danger); }
/* Logo block spacing when standalone under the menu */
.profile-logo { margin: 18px 0 0; }
.profile-logo img { height: 42px; }

/* ============================================================
   Profile v4 — menu alignment fix
   ============================================================ */
/* The generic .menu-item span { flex: 1 } stretched the icon chips to half the row width.
   Pin the icon to its fixed 38px size so labels start right after it and align evenly. */
.menu-item .mi-icon { flex: 0 0 auto; }
.menu-item > span { min-width: 0; }

/* ============================================================
   Profile v5 — Ola-style design (banner + 3 stats + 5 menu rows)
   ============================================================ */

/* Banner hero */
.profile-hero-banner {
    position: relative;
    margin: 16px 16px 0;
    border-radius: 20px;
    overflow: hidden;
    height: 215px;
    background: linear-gradient(120deg, #1C2430, #2a3140 55%, #5a1515);
    box-shadow: 0 16px 32px -16px rgba(20, 24, 36, .5);
}
.profile-hero-banner img.phb-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    opacity: .30;
}
.profile-hero-banner .phb-shade {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(15, 18, 28, .92) 30%, rgba(15, 18, 28, .35) 72%, rgba(15, 18, 28, .25));
}
.profile-hero-banner .phb-settings {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff; font-size: 14px;
    backdrop-filter: blur(6px);
    transition: .2s;
}
.profile-hero-banner .phb-settings:hover { background: var(--grad-red); border-color: transparent; color: #fff; }
.profile-hero-banner .phb-content {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; justify-content: center;
    padding: 18px;
}
.profile-hero-banner .phb-top { display: flex; align-items: center; gap: 12px; }
.profile-hero-banner .phb-avatar {
    position: relative; flex-shrink: 0;
    width: 58px; height: 58px; border-radius: 50%;
    overflow: hidden; border: 3px solid #fff;
    box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .5);
    background: #fff;
}
.profile-hero-banner .phb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero-banner .phb-avatar .phb-ring {
    position: absolute; inset: -6px; border-radius: 50%;
    border: 2px dashed rgba(212, 175, 55, .75);
    animation: spinSlow 16s linear infinite;
}
.profile-hero-banner .phb-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.profile-hero-banner .phb-id strong { color: #fff; font-size: 16px; line-height: 1.2; }
.profile-hero-banner .phb-id span {
    color: rgba(255, 255, 255, .88); font-size: 12px; font-weight: 600;
    letter-spacing: .5px; display: flex; align-items: center; gap: 6px;
}
.profile-hero-banner .phb-vip {
    align-self: flex-start; margin-top: 13px;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(15, 18, 28, .62);
    border: 1px solid rgba(212, 175, 55, .75);
    color: #FFE082; font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
    padding: 5px 14px; border-radius: 50rem;
    backdrop-filter: blur(6px);
}
.profile-hero-banner .phb-sponsor { margin-top: 8px; font-size: 11px; color: rgba(255, 255, 255, .72); }
.profile-hero-banner .phb-sponsor strong { color: #FFE082; }

/* Three stat cards */
.profile-stats3 {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; padding: 14px 16px 0;
}
.profile-stats3 .ps-card {
    background: #fff; border: 1px solid var(--card-border);
    border-radius: 15px; padding: 14px 8px; text-align: center;
    box-shadow: var(--shadow-sm); transition: .2s;
}
.profile-stats3 .ps-card:hover {
    transform: translateY(-3px);
    border-color: rgba(211, 47, 47, .35);
    box-shadow: 0 14px 28px -14px rgba(211, 47, 47, .3);
}
.profile-stats3 .ps-card strong {
    display: block; font-size: 15px; font-weight: 800;
    color: var(--text); margin-bottom: 3px;
    white-space: nowrap;
}
.profile-stats3 .ps-card.mid strong { color: var(--red); }
.profile-stats3 .ps-card span {
    font-size: 9.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--muted);
}

/* Menu: 5 separate rounded rows */
.profile-menu5 {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 16px 0;
}
.profile-menu5 .pm5-item {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 14px;
    background: #fff; border: 1px solid var(--card-border);
    border-radius: 15px; box-shadow: var(--shadow-sm);
    color: var(--text); transition: .2s;
}
.profile-menu5 .pm5-item:hover {
    transform: translateY(-2px);
    border-color: rgba(211, 47, 47, .4);
    color: var(--text);
    box-shadow: 0 14px 28px -14px rgba(211, 47, 47, .3);
}
.profile-menu5 .pm5-item .mi-icon { flex: 0 0 auto; }
.profile-menu5 .pm5-item > span:nth-child(2) {
    flex: 1; min-width: 0;
    font-size: 13.5px; font-weight: 600;
}
.profile-menu5 .mi-chev { color: #C3CAD6; font-size: 12px; flex-shrink: 0; transition: transform .2s, color .2s; }
.profile-menu5 .pm5-item:hover .mi-chev { transform: translateX(3px); color: var(--red); }

/* Profile v5 polish — icon chips for the menu rows + stat amount fit */
.profile-menu5 .pm5-item .mi-icon {
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center; font-size: 15px;
    background: #F7F9FC; color: var(--red);
    border: 1px solid var(--card-border); flex: 0 0 auto;
}
.profile-menu5 .pm5-item:hover .mi-icon { background: var(--grad-red); color: #fff; border-color: transparent; }
.profile-stats3 .ps-card strong { white-space: normal; font-size: 14.5px; }
@media (max-width: 360px) {
    .profile-stats3 .ps-card strong { font-size: 12.5px; }
}

/* ============================================================
   Advanced v3 — fully advanced premium user pages
   Wallet hub · gradient tiles · timeline lists · progress rings
   ============================================================ */

/* ---------- Wallet hub (wallet.php) ---------- */
.wallet-hub-hero {
    position: relative;
    margin: 14px 16px 0;
    border-radius: 22px;
    padding: 22px 20px 20px;
    color: #fff;
    background: linear-gradient(130deg, #C62828 0%, #8f1010 55%, #5c0b0b 100%);
    box-shadow: 0 20px 42px -16px var(--red-glow);
    overflow: hidden;
}
.wallet-hub-hero::before {
    content: ''; position: absolute; right: -40px; top: -50px;
    width: 190px; height: 190px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
}
.wallet-hub-hero::after {
    content: ''; position: absolute; left: 24px; bottom: -70px;
    width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,215,130,.14), transparent 68%);
}
.whh-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.whh-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase;
    color: #FFE082; background: rgba(255,255,255,.12);
    padding: 5px 12px; border-radius: 50rem;
}
.whh-edit {
    width: 38px; height: 38px; border-radius: 12px;
    display: grid; place-items: center; font-size: 14px;
    background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.22);
    transition: .2s;
}
.whh-edit:hover { background: #fff; color: var(--red); }
.whh-amount {
    position: relative; z-index: 1;
    font-size: 38px; font-weight: 800; line-height: 1.1;
    margin: 14px 0 4px; text-shadow: 0 4px 20px rgba(0,0,0,.28);
}
.whh-sub { position: relative; z-index: 1; font-size: 12px; color: rgba(255,255,255,.85); display: flex; gap: 8px; flex-wrap: wrap; }
.whh-sub b { color: #FFE082; }
.whh-actions {
    position: relative; z-index: 1;
    display: flex; gap: 10px; margin-top: 18px;
}
.whh-actions .whh-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff; border-radius: 13px;
    padding: 11px; font-size: 13px; font-weight: 700;
    text-decoration: none; transition: .2s;
    backdrop-filter: blur(6px);
}
.whh-actions .whh-btn:hover { background: #fff; color: var(--red); transform: translateY(-2px); }
.whh-actions .whh-btn.ghost { background: rgba(0,0,0,.14); }

/* Wallet grid cards */
.wallet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; padding: 16px 16px 0; }
@media (min-width: 640px) { .wallet-grid { grid-template-columns: repeat(3, 1fr); } }
.wcard {
    position: relative;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 17px;
    padding: 15px 14px 13px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: .22s;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.wcard::before {
    content: ''; position: absolute; left: 14px; top: 0;
    height: 3px; width: 34px; border-radius: 0 0 4px 4px;
    background: var(--grad-red);
}
.wcard:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px rgba(211,47,47,.35); }
.wcard .wc-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; font-size: 16px; color: #fff;
    box-shadow: 0 8px 16px -8px rgba(23,30,50,.4);
}
.wcard .wc-label { font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); }
.wcard .wc-value { font-size: 19px; font-weight: 800; line-height: 1.1; }
.wcard .wc-value.gold { color: #a9840f; }
.wcard .wc-hint { font-size: 11px; color: var(--muted); }
.wcard .wc-btn {
    margin-top: auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 12px; font-weight: 700;
    color: var(--red); background: rgba(211,47,47,.07);
    border-radius: 10px; padding: 8px;
    text-decoration: none; transition: .18s;
}
.wcard .wc-btn:hover { background: var(--grad-red); color: #fff; }
.wcard.glow-red::after {
    content: ''; position: absolute; right: -28px; top: -28px;
    width: 100px; height: 100px; border-radius: 50%;
    background: radial-gradient(circle, rgba(211,47,47,.07), transparent 65%);
    pointer-events: none;
}

/* Pending strip (wallet) */
.pending-strip {
    display: flex; align-items: center; gap: 12px;
    margin: 16px 16px 0;
    padding: 13px 16px;
    border-radius: 15px;
    background: rgba(212,175,55,.09);
    border: 1px solid rgba(212,175,55,.3);
    font-size: 13px;
}
.pending-strip i { color: #B45309; font-size: 15px; }
.pending-strip .ps-right { margin-left: auto; text-align: right; }
.pending-strip .ps-right strong { color: #B45309; }

/* ---------- Gradient stat tiles (income / commission) ---------- */
.gtiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; padding: 16px 16px 0; }
@media (min-width: 640px) { .gtiles { grid-template-columns: repeat(4, 1fr); } }
.gtile {
    position: relative;
    border-radius: 17px;
    padding: 15px 14px;
    color: #fff;
    overflow: hidden;
    transition: .22s;
    box-shadow: 0 14px 28px -14px rgba(23,30,50,.4);
}
.gtile::after {
    content: ''; position: absolute; right: -24px; top: -24px;
    width: 90px; height: 90px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%);
}
.gtile:hover { transform: translateY(-3px); filter: brightness(1.05); }
.gtile.gt-red { background: linear-gradient(135deg, #E53935, #B71C1C); }
.gtile.gt-green { background: linear-gradient(135deg, #22C55E, #15803D); }
.gtile.gt-blue { background: linear-gradient(135deg, #38BDF8, #1D4ED8); }
.gtile.gt-purple { background: linear-gradient(135deg, #A78BFA, #6D28D9); }
.gtile.gt-gold { background: linear-gradient(135deg, #F0D878, #B08D1E); color: #3d2f04; }
.gtile.gt-cyan { background: linear-gradient(135deg, #22D3EE, #0E7490); }
.gtile.gt-orange { background: linear-gradient(135deg, #FB923C, #C2410C); }
.gtile .gt-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; position: relative; z-index: 1; }
.gtile .gt-icon {
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center; font-size: 15px;
    background: rgba(255,255,255,.2);
}
.gtile .gt-label { font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; opacity: .85; }
.gtile .gt-value { font-size: 20px; font-weight: 800; line-height: 1.1; position: relative; z-index: 1; }
.gtile .gt-hint { font-size: 10.5px; opacity: .8; margin-top: 3px; position: relative; z-index: 1; }

/* ---------- Timeline lists (income / commission / history) ---------- */
.tl-list { padding: 6px 0; }
.tl-item {
    position: relative;
    display: flex; gap: 13px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--card-border);
    transition: .18s;
}
.tl-item:last-child { border-bottom: 0; }
.tl-item:hover { background: #FAFBFE; }
.tl-item .tl-rail { position: relative; flex-shrink: 0; }
.tl-item .tl-rail::after {
    content: ''; position: absolute; left: 50%; top: 100%;
    width: 2px; height: 28px;
    background: linear-gradient(180deg, rgba(211,47,47,.25), transparent);
    transform: translateX(-50%);
}
.tl-item:last-child .tl-rail::after { display: none; }
.tl-item .tl-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; font-size: 15px;
    background: rgba(211,47,47,.08); color: var(--red);
    border: 1px solid rgba(211,47,47,.14);
    position: relative; z-index: 1;
}
.tl-item .tl-icon.green { background: rgba(22,163,74,.08); color: var(--success); border-color: rgba(22,163,74,.16); }
.tl-item .tl-icon.blue { background: rgba(37,99,235,.08); color: #2563EB; border-color: rgba(37,99,235,.16); }
.tl-item .tl-icon.purple { background: rgba(124,58,237,.08); color: #7C3AED; border-color: rgba(124,58,237,.16); }
.tl-item .tl-icon.gold { background: var(--gold-soft); color: #a9840f; border-color: rgba(212,175,55,.3); }
.tl-item .tl-body { flex: 1; min-width: 0; }
.tl-item .tl-title { font-size: 13.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-item .tl-desc { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tl-item .tl-time { font-size: 10.5px; color: #A9B1C0; margin-top: 3px; }
.tl-item .tl-right { text-align: right; flex-shrink: 0; }
.tl-item .tl-amount { font-size: 15px; font-weight: 800; }
.tl-item .tl-amount.pos { color: var(--success); }
.tl-item .tl-amount.neg { color: var(--danger); }
.tl-item .tl-amount.gold { color: #a9840f; }
.tl-chip {
    font-size: 10px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 50rem;
    background: rgba(211,47,47,.08); color: var(--red);
}
.tl-chip.green { background: rgba(22,163,74,.1); color: var(--success); }
.tl-chip.gold { background: var(--gold-soft); color: #a9840f; }
.tl-chip.blue { background: rgba(37,99,235,.1); color: #2563EB; }
.tl-chip.purple { background: rgba(124,58,237,.1); color: #7C3AED; }
.tl-chip.grey { background: #EFF1F5; color: var(--muted); }

/* ---------- Premium panel (shared) ---------- */
.p-panel {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 17px;
    box-shadow: var(--shadow-sm);
    margin: 16px 16px 0;
    overflow: hidden;
}
.p-panel .pp-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--card-border);
}
.p-panel .pp-head h3 {
    font-size: 14.5px; font-weight: 700; margin: 0;
    display: flex; align-items: center; gap: 9px;
}
.p-panel .pp-head h3 i { color: var(--red); font-size: 14px; }
.p-panel .pp-body { padding: 4px 0; }

/* ---------- Investment cards with progress ring (investments.php) ---------- */
.inv-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px 16px 0; }
@media (min-width: 640px) { .inv-grid { grid-template-columns: repeat(3, 1fr); } }
.inv-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    padding: 16px 14px;
    box-shadow: var(--shadow-sm);
    transition: .22s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.inv-card::before {
    content: ''; position: absolute; left: 0; top: 0; right: 0;
    height: 4px; background: var(--grad-red);
}
.inv-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -18px rgba(211,47,47,.38); }
.inv-card .ic-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.inv-card .ic-name { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.inv-card .ic-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.inv-card .ic-meta .im {
    flex: 1 1 40%;
    background: #F7F9FC;
    border-radius: 11px;
    padding: 8px 10px;
}
.inv-card .ic-meta .im small { display: block; font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.inv-card .ic-meta .im strong { font-size: 13.5px; font-weight: 800; }
.inv-card .ic-meta .im strong.gold { color: #a9840f; }
.inv-card .ic-dates {
    display: flex; justify-content: space-between;
    font-size: 10.5px; color: var(--muted);
    border-top: 1px dashed var(--card-border);
    padding-top: 9px;
}

/* SVG progress ring */
.ring-wrap { display: flex; align-items: center; gap: 12px; }
.ring {
    position: relative;
    width: 62px; height: 62px;
    flex-shrink: 0;
}
.ring svg { transform: rotate(-90deg); width: 62px; height: 62px; }
.ring .ring-bg { stroke: #EEF0F5; }
.ring .ring-fg {
    stroke: url(#ringGrad);
    stroke-linecap: round;
    transition: stroke-dashoffset 1s cubic-bezier(.4, 0, .2, 1);
}
.ring .ring-txt {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 800; color: var(--red);
}
.ring-label { font-size: 11px; color: var(--muted); }
.ring-label b { display: block; font-size: 13px; color: var(--text); }

/* ---------- Settings rows (settings.php) ---------- */
.set-card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 17px;
    box-shadow: var(--shadow-sm);
    margin: 16px 16px 0;
    overflow: hidden;
}
.set-card .sc-head {
    display: flex; align-items: center; gap: 10px;
    padding: 15px 16px;
    border-bottom: 1px solid var(--card-border);
}
.set-card .sc-head .sc-icon {
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center; font-size: 15px;
    background: rgba(211,47,47,.08); color: var(--red);
}
.set-card .sc-head strong { font-size: 14.5px; }
.set-card .sc-head small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
.set-card .sc-body { padding: 16px; }
.device-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--card-border);
    transition: .18s;
}
.device-row:last-child { border-bottom: 0; }
.device-row:hover { background: #FAFBFE; }
.device-row .d-icon {
    width: 38px; height: 38px; border-radius: 11px;
    display: grid; place-items: center; font-size: 15px;
    background: var(--gold-soft); color: #a9840f;
    flex-shrink: 0;
}
.device-row .d-body { flex: 1; min-width: 0; }
.device-row .d-name { font-size: 13px; font-weight: 700; }
.device-row .d-sub { font-size: 11.5px; color: var(--muted); }
.device-row .d-time { font-size: 10.5px; color: #A9B1C0; text-align: right; flex-shrink: 0; }

/* ---------- Team summary hero (team_recharge / team_invest) ---------- */
.team-sum-hero {
    position: relative;
    margin: 14px 16px 0;
    border-radius: 20px;
    padding: 20px 18px;
    color: #fff;
    background: linear-gradient(130deg, #C62828 0%, #8f1010 60%, #5c0b0b 100%);
    box-shadow: 0 18px 38px -14px var(--red-glow);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.team-sum-hero::before {
    content: ''; position: absolute; right: -30px; top: -40px;
    width: 150px; height: 150px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.16), transparent 68%);
}
.team-sum-hero .tsh-label { font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px; text-transform: uppercase; color: #FFE082; }
.team-sum-hero .tsh-value { font-size: 27px; font-weight: 800; text-shadow: 0 4px 16px rgba(0,0,0,.25); }
.team-sum-hero .tsh-count { text-align: right; position: relative; z-index: 1; }
.team-sum-hero .tsh-count b { display: block; font-size: 24px; font-weight: 800; }
.team-sum-hero .tsh-count span { font-size: 10.5px; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .8px; }

/* ---------- Filter bar (advanced pages) ---------- */
.adv-filter {
    display: flex; gap: 9px; flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 13px;
    margin: 16px 16px 0;
    box-shadow: var(--shadow-sm);
}
.adv-filter .form-select, .adv-filter .form-control { font-size: 13px; }
.adv-filter .btn { font-size: 13px; }

/* ---------- Section title tweaks for advanced pages ---------- */
.adv-section {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 20px 16px 4px;
}
.adv-section h2 {
    font-size: 16px; font-weight: 800; margin: 0;
    display: flex; align-items: center; gap: 9px;
}
.adv-section h2 .tick {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--red); box-shadow: 0 0 0 4px rgba(211,47,47,.12);
}
.adv-section span { font-size: 11px; color: var(--muted); }

/* Advanced pages: keep spacing tight after hero/tiles/filter */
.gtiles + .adv-filter, .gtiles + .p-panel, .adv-filter + .p-panel { margin-top: 0; }

/* ============================================================
   Advanced v3 extras — remaining pages (calc / plan detail /
   faq / news / support / edit profile)
   ============================================================ */

/* Feature rows (plan detail) */
.feat-row {
    display: flex; align-items: center; gap: 10px;
    background: #F7F9FC;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 10px 13px;
    font-size: 13px;
    color: var(--text);
    transition: .18s;
}
.feat-row:hover { border-color: rgba(211,47,47,.35); background: #FBF4F4; }
.feat-row .fr-icon {
    width: 26px; height: 26px; border-radius: 8px;
    display: grid; place-items: center; font-size: 12px;
    background: var(--gold-soft); color: #a9840f;
    flex-shrink: 0;
}

/* FAQ question icon chip */
.faq-q-icon {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px; border-radius: 9px;
    background: var(--gold-soft); color: #a9840f;
    margin-right: 10px;
    font-size: 14px;
}

/* Plan detail tiles row: tight spacing under the card */
.pc-body .gtile { box-shadow: 0 10px 22px -12px rgba(23,30,50,.35); }

/* Public info pages: p-panel + set-card sit inside info-page padding */
.info-page .p-panel, .info-page .set-card { margin-left: 0; margin-right: 0; }

/* Calculator: results tiles entrance */
#calcResults { transition: opacity .25s ease; }

/* Support: ticket reply bubble inside timeline */
.ticket-reply { border-left: 3px solid #a9840f; }