/* ═══════════════════════════════════════════════════════
   INVESCO — ROYAL OBSIDIAN & LIQUID GOLD THEME
   Unique, Ultra-Premium Native App UI
═══════════════════════════════════════════════════════ */

:root {
    /* ── Obsidian Backgrounds (Warm Dark) ── */
    --bg-root:      #050403;
    --bg-app:       #0c0907;
    --bg-card:      #16120e;
    --bg-input:     #0f0c0a;

    /* ── Liquid Gold Palette ── */
    --gold-1:       #fef1b5; /* Highlight */
    --gold-2:       #dfa839; /* Base */
    --gold-3:       #aa771c; /* Deep */
    --gold-glow:    rgba(223, 168, 57, 0.2);
    --gold-shadow:  rgba(223, 168, 57, 0.08);
    
    /* ── Text (Creamy & Golden) ── */
    --tw:           #f4ede4;
    --ts:           #d2c5b3;
    --tm:           #8a7d6d;
    
    /* ── Borders ── */
    --bd:           rgba(223, 168, 57, 0.15);
    --bd-light:     rgba(255, 255, 255, 0.03);
    
    /* ── Status ── */
    --ok:           #10b981;
    --ok-b:         rgba(16, 185, 129, 0.15);
    --err:          #ef4444;
    --err-b:        rgba(239, 68, 68, 0.15);

    --r-sm:         14px;
    --r-md:         18px;
    --r-lg:         24px;
    --r-xl:         32px;
    --r-p:          999px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }

body {
    height: 100%;
    font-family: 'Inter', -apple-system, sans-serif;
    background: var(--bg-root);
    color: var(--tw);
    display: flex; justify-content: center; align-items: flex-start;
    /* Ambient background glows */
    background-image: 
        radial-gradient(circle at 15% 10%, rgba(223, 168, 57, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 85% 90%, rgba(223, 168, 57, 0.04) 0%, transparent 50%);
}

/* ══ SHELL ══════════════════════════════ */
.app-container {
    width: 100%; max-width: 430px;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-app);
    display: flex; flex-direction: column;
    overflow: hidden;
    position: relative;
}

@media(min-width: 431px) {
    .app-container {
        margin: 16px 0;
        height: calc(100vh - 32px);
        height: calc(100dvh - 32px);
        border-radius: 40px;
        border: 1px solid var(--bd);
        box-shadow: 0 0 0 8px rgba(223, 168, 57, 0.03),
                    0 40px 100px rgba(0, 0, 0, 0.8);
    }
}

/* ══ HEADER ══════════════════════════════ */
.app-header {
    flex-shrink: 0;
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 22px 14px;
    background: linear-gradient(180deg, #0c0907 50%, rgba(12,9,7,0.85) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 40;
}

/* ══ CONTENT ═════════════════════════════ */
.app-content {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 16px 20px 24px;
    min-height: 0; /* Fixes Flexbox expansion bug */
    -webkit-overflow-scrolling: touch;
}
.app-content::-webkit-scrollbar { width: 0; }

/* ══ BOTTOM NAV ══════════════════════════ */
.bottom-nav {
    flex-shrink: 0;
    height: 70px;
    margin: 0 24px calc(36px + env(safe-area-inset-bottom, 0px)) 24px;
    border-radius: 24px;
    background: rgba(18, 14, 10, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(223, 168, 57, 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8), inset 0 2px 10px rgba(223, 168, 57, 0.1);
    display: flex; justify-content: space-around; align-items: center;
    z-index: 50;
    position: relative;
    padding: 0 10px;
}
.bottom-nav::before {
    display: none;
}
.nav-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: var(--tm); text-decoration: none;
    font-size: 10px; font-weight: 600; width: 20%;
    transition: color 0.3s;
    position: relative;
}
.nav-item i { font-size: 22px; transition: transform 0.3s, filter 0.3s; }
.nav-item.active { color: var(--gold-1); }
.nav-item.active i {
    transform: translateY(-4px);
    color: var(--gold-2);
    filter: drop-shadow(0 4px 8px var(--gold-glow));
}
.nav-item.active::after {
    content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
    width: 4px; height: 4px; border-radius:50%; background: var(--gold-2);
    box-shadow: 0 0 8px var(--gold-2);
}

/* ══ TEXT GRADIENTS ══════════════════════ */
.text-gold-gradient {
    background: linear-gradient(to right, var(--gold-3) 0%, var(--gold-1) 30%, var(--gold-2) 70%, var(--gold-3) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: goldShine 4s linear infinite;
}
@keyframes goldShine { to { background-position: 200% center; } }

/* ══ GLOBAL APP BACKGROUND ═════════════════ */
.app-container {
    min-height: 100vh;
    background: #050403;
    position: relative;
    overflow-x: hidden;
}
/* Ambient Glowing Orbs */
.app-container::before {
    content: ''; position: fixed; top: -15vh; left: -15vw;
    width: 60vw; height: 60vw; border-radius: 50%;
    background: radial-gradient(circle, rgba(223, 168, 57, 0.08) 0%, transparent 70%);
    z-index: 0; pointer-events: none;
}
.app-container::after {
    content: ''; position: fixed; bottom: -10vh; right: -20vw;
    width: 70vw; height: 70vw; border-radius: 50%;
    background: radial-gradient(circle, rgba(223, 168, 57, 0.06) 0%, transparent 60%);
    z-index: 0; pointer-events: none;
}
.app-header, .app-content, .bottom-nav { position: relative; z-index: 1; }
.app-content, .bottom-nav { position: relative; z-index: 1; }

/* ══ CARDS & VIP HERO (Unique & Stunning) ══════════════════════ */
.hero-card {
    background: linear-gradient(145deg, rgba(36,28,20,0.85) 0%, rgba(12,9,7,0.9) 100%);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(223,168,57,0.3);
    border-top: 1px solid rgba(223,168,57,0.6);
    border-radius: 24px;
    padding: 32px 24px;
    margin-bottom: 28px;
    position: relative; overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 2px 12px rgba(223,168,57,0.1);
}
/* Animated Holographic Sweep */
.hero-card::before {
    content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(223,168,57,0.15), transparent);
    transform: skewX(-25deg); animation: sweep 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}
@keyframes sweep { 0% { left: -150%; } 20%, 100% { left: 250%; } }

/* Floating Orb inside Hero Card */
.hero-card::after {
    content: ''; position: absolute; top: -50px; right: -50px;
    width: 180px; height: 180px;
    background: radial-gradient(circle, rgba(223, 168, 57, 0.2) 0%, transparent 60%);
    border-radius: 50%; pointer-events: none;
}

.card {
    background: rgba(18,14,10,0.65);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(223, 168, 57, 0.1);
    border-top: 1px solid rgba(223, 168, 57, 0.25);
    border-radius: 20px;
    padding: 24px;
    position: relative; overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6);
    transition: all 0.3s ease;
}
.card:active { transform: scale(0.98); border-color: rgba(223, 168, 57, 0.4); box-shadow: 0 4px 16px rgba(223,168,57,0.1); }

/* ══ QUICK ACTION GRID (Floating Orbs) ═══════════════════ */
.qa-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 20px 12px; margin-bottom: 36px;
}
.qa-item {
    display: flex; flex-direction: column; align-items: center;
    text-decoration: none; gap: 10px;
}
.qa-icon {
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(145deg, rgba(32,24,18,0.9), rgba(12,9,7,0.9));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(223, 168, 57, 0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: var(--gold-2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 2px 6px rgba(223,168,57,0.15);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative; overflow: hidden;
}
/* Subtle inner glow ring */
.qa-icon::after {
    content:''; position:absolute; inset:2px; border-radius:50%;
    border: 1px solid rgba(223,168,57,0.05); pointer-events:none;
}
.qa-item:active .qa-icon { 
    transform: scale(0.9) translateY(2px);
    background: linear-gradient(145deg, rgba(40,30,22,1), rgba(18,14,10,1));
    border-color: rgba(223, 168, 57, 0.5);
    box-shadow: 0 0 20px rgba(223,168,57,0.3);
}
.qa-lbl { color: var(--tw); font-size: 11px; font-weight: 600; text-align: center; letter-spacing: 0.5px; opacity: 0.9; }

/* ══ BUTTONS ═════════════════════════════ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; padding: 14px;
    border-radius: var(--r-md);
    font-size: 14px; font-weight: 700;
    cursor: pointer; border: none;
    transition: all 0.2s; text-decoration: none; gap: 8px;
    letter-spacing: 0.5px;
}
.btn-primary {
    background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold-3) 100%);
    color: #120e0a;
    box-shadow: 0 8px 24px var(--gold-glow), inset 0 2px 4px rgba(255,255,255,0.3);
    text-transform: uppercase; font-size: 13px; font-weight: 800;
}
.btn-primary:active { transform: scale(0.97); box-shadow: 0 4px 12px var(--gold-shadow); }

.btn-outline {
    background: transparent;
    border: 1px solid var(--gold-2);
    color: var(--gold-2);
}
.btn-outline:active { background: rgba(223, 168, 57, 0.1); }

/* ══ FORM INPUTS ═════════════════════════ */
.form-group { margin-bottom: 16px; }
.form-label {
    display: block; color: var(--ts);
    font-size: 11px; font-weight: 600;
    margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px;
}
.input-wrap { position: relative; }
.input-ico {
    position: absolute; left: 16px; top: 50%;
    transform: translateY(-50%);
    color: var(--gold-3); font-size: 14px;
}
.form-ctrl {
    width: 100%;
    background: #0a0807;
    border: 1px solid var(--bd);
    border-radius: var(--r-md);
    color: var(--tw); padding: 14px;
    font-size: 13px; font-weight: 500; outline: none;
    transition: all 0.3s;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}
.form-ctrl.has-ico { padding-left: 42px; }
.form-ctrl::placeholder { color: var(--tm); font-weight: 400; }
.form-ctrl:focus {
    border-color: var(--gold-2);
    box-shadow: 0 0 0 4px var(--gold-glow), inset 0 2px 6px rgba(0,0,0,0.5);
}

/* ══ SECTION HEADER ══════════════════════ */
.sec-hdr {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 18px; padding: 0 4px;
}
.sec-ttl {
    font-size: 17px; font-weight: 800; color: var(--tw);
    display: flex; align-items: center; gap: 8px;
}
.sec-ttl::before {
    content:''; display:block; width:4px; height:16px; border-radius:2px;
    background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
}
.sec-lnk { font-size: 13px; color: var(--gold-2); text-decoration: none; font-weight: 700; }

/* ══ TX ROW ══════════════════════════════ */
.tx-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0; border-bottom: 1px solid var(--bd-light);
}
.tx-row:last-child { border-bottom: none; padding-bottom: 0; }
.tx-row:first-child { padding-top: 0; }

/* ══ BADGES ══════════════════════════════ */
.badge {
    display: inline-flex; align-items: center;
    padding: 5px 12px; border-radius: var(--r-p);
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
}
.badge-ok  { background: var(--ok-b); color: var(--ok); border: 1px solid rgba(16,185,129,0.2); }
.badge-err { background: var(--err-b); color: var(--err); border: 1px solid rgba(239,68,68,0.2); }
.badge-gold { background: rgba(223,168,57,0.1); color: var(--gold-2); border: 1px solid var(--bd); }

/* ══ FLASH ═══════════════════════════════ */
.flash {
    padding: 16px 20px; border-radius: var(--r-md);
    margin: 0 0 20px; font-size: 14px; font-weight: 600;
    display: flex; align-items: center; gap: 12px;
}
.flash-ok  { background: var(--ok-b); border: 1px solid rgba(16,185,129,0.3); color: var(--ok); }
.flash-err { background: var(--err-b); border: 1px solid rgba(239,68,68,0.3); color: var(--err); }

/* ══ UTILS ═══════════════════════════════ */
.mb-2{margin-bottom:8px;} .mb-3{margin-bottom:14px;} .mb-4{margin-bottom:20px;} .mb-5{margin-bottom:28px;}
.mt-4{margin-top:20px;}
.text-center{text-align:center;} .text-right{text-align:right;}

/* ==========================================================================
   UI SCALE DOWN (MOBILE-FIRST COMPACT PRO)
   Requested by user: Cards and texts scaled down for professional app look.
========================================================================== */
.card, .hero-card {
    padding: 16px !important;
    border-radius: 16px !important;
    margin-bottom: 16px !important;
}
.hero-card {
    padding: 20px 16px !important;
}
h2 {
    font-size: 18px !important;
}
h3 {
    font-size: 15px !important;
}
p {
    font-size: 12px !important;
}
.qa-grid {
    gap: 12px 8px !important;
    margin-bottom: 24px !important;
}
.qa-item .qa-icon {
    width: 50px !important;
    height: 50px !important;
    font-size: 24px !important;
    border-radius: 14px !important;
}
.qa-item span {
    font-size: 11px !important;
}
.btn {
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
}
.form-control, select {
    padding: 12px 14px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
}
.bottom-nav {
    height: 70px !important;
}
.nav-item i {
    font-size: 22px !important;
}
.nav-item span {
    font-size: 10px !important;
    margin-top: 4px !important;
}
.badge-ok, .badge-err, .badge-gold {
    font-size: 10px !important;
    padding: 4px 8px !important;
}


/* Inline text size overrides for a compact look */
div[style*='font-size:42px'], div[style*='font-size: 42px'] { font-size: 32px !important; }
div[style*='font-size:32px'], div[style*='font-size: 32px'] { font-size: 24px !important; }
div[style*='font-size:28px'], div[style*='font-size: 28px'] { font-size: 20px !important; }
div[style*='font-size:24px'], div[style*='font-size: 24px'] { font-size: 18px !important; }
i[style*='font-size:24px'] { font-size: 22px !important; }
div[style*='font-size:20px'], div[style*='font-size: 20px'] { font-size: 16px !important; }

/* Scale down inline icons / heights */
div[style*='width:54px'], div[style*='height:54px'] { width: 48px !important; height: 48px !important; }
div[style*='width:48px'], div[style*='height:48px'] { width: 42px !important; height: 42px !important; }

/* Adjustments for Referral & Invest Cards specifically */
.referral-card, .plan-card {
    padding: 16px !important;
    border-radius: 14px !important;
}
.referral-stat h4, .plan-stat h4 {
    font-size: 18px !important;
}