:root {
    --neon-cyan: #00f3ff;
    --neon-purple: #bc13fe;
    --dark-bg: #0b0c10;
    --glass-bg: rgba(20, 20, 25, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
}

body {
    background-color: #0b0f19;
    color: #fff;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    background-image:
        radial-gradient(circle at 0% 0%, rgba(30, 64, 175, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 100% 0%, rgba(15, 23, 42, 0.8) 0%, transparent 30%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* Universal Top Header styling */
.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding: 0 10px;
}

.brand-logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.brand-logo svg {
    width: 24px;
    height: 24px;
    fill: #fff;
}

.wallet-dropdown {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 1040;
}

.bell-icon {
    color: #fff;
    font-size: 1.3rem;
    position: relative;
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Neon Borders for active or hovered elements */
.neon-border-cyan {
    border: 1px solid var(--neon-cyan);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.5), inset 0 0 10px rgba(0, 243, 255, 0.2);
}

.neon-border-purple {
    border: 1px solid var(--neon-purple);
    box-shadow: 0 0 10px rgba(188, 19, 254, 0.5), inset 0 0 10px rgba(188, 19, 254, 0.2);
}

.neon-text-cyan {
    color: var(--neon-cyan);
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.6);
}

.neon-text-purple {
    color: var(--neon-purple);
    text-shadow: 0 0 8px rgba(188, 19, 254, 0.6);
}

/* Navbar Styles (Mobile Bottom / Desktop Top) */
.bottom-nav {
    position: fixed;
    background: rgba(11, 12, 16, 0.9);
    backdrop-filter: blur(10px);
    z-index: 1000;
}

.nav-link.active {
    color: var(--neon-cyan) !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.6);
}

/* Mobile View (Bottom) */
@media (max-width: 768px) {
    body {
        padding-bottom: 80px;
        padding-top: 20px;
    }

    .bottom-nav {
        bottom: 0;
        width: 100%;
        border-top: 1px solid var(--glass-border);
        padding-bottom: env(safe-area-inset-bottom);
        display: flex;
        justify-content: space-around;
        padding: 0.5rem;
    }

    .nav-brand-desktop {
        display: none;
    }

    .nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #64748b !important;
        border-radius: 20px;
        padding: 0.4rem 0.5rem;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .nav-link.active {
        background: rgba(59, 130, 246, 0.15);
        border: 1px solid rgba(59, 130, 246, 0.3);
        color: #60a5fa !important;
        flex-direction: row;
        padding: 0.5rem 1rem;
        gap: 0.4rem;
        text-shadow: none;
    }

    .nav-link i {
        font-size: 1.25rem;
    }

    .nav-link.active i {
        margin-bottom: 0;
    }

    .nav-label {
        font-size: 0.8rem;
        font-weight: 600;
    }

    .nav-link:not(.active) .nav-label {
        display: none;
    }
}

/* Desktop View (Top) */
@media (min-width: 769px) {
    body {
        padding-top: 90px;
        padding-bottom: 40px;
    }

    .bottom-nav {
        top: 0;
        left: 0;
        right: 0;
        height: 70px;
        border-bottom: 1px solid var(--glass-border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2rem;
    }

    .nav-brand-desktop {
        font-size: 1.5rem;
        font-weight: 800;
        color: #fff;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .nav-links-wrapper {
        display: flex;
        gap: 2rem;
        align-items: center;
    }

    .nav-link {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1rem;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        transition: background 0.3s;
    }

    .nav-link:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .nav-link small {
        font-size: 1rem;
    }

    .nav-link i {
        margin-bottom: 0;
        font-size: 1.2rem;
    }
}

/* Notification Bell Badge */
.notif-bell-wrap {
    position: relative;
    display: inline-flex;
}

.notif-bell-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #e53e3e;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    min-width: 20px;
    height: 20px;
    border-radius: 999px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(229, 62, 62, 0.7), 0 0 0 2px rgba(11, 12, 16, 0.9);
    z-index: 10;
}

/* Crypto Loading Overlay */
#crypto-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(11, 12, 16, 0.85);
    /* Dark transparent background */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: none;
    /* Hidden by default */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.crypto-spinner {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top: 3px solid var(--neon-cyan);
    border-right: 3px solid var(--neon-purple);
    border-bottom: 3px solid var(--neon-cyan);
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.5), inset 0 0 20px rgba(188, 19, 254, 0.3);
    animation: spin 1s linear infinite;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.crypto-spinner::before {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(188, 19, 254, 0.8) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse-glow 2s ease-in-out infinite alternate;
}

.loader-text {
    margin-top: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pulse-glow 1.5s ease-in-out infinite alternate;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes pulse-glow {
    0% {
        opacity: 0.5;
        transform: scale(0.9);
    }

    100% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Premium Glass Cards (From Dashboard) */
.premium-card {
    background: #111827;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.premium-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(37, 99, 235, 0.15), transparent);
    pointer-events: none;
    z-index: 0;
}

/* Subtle grid background for profile card */
.grid-bg {
    background-size: 30px 30px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

.wallet-dropdown {
    /*position: absolute;
    top: 15px;
    right: 15px;*/
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
}

.orb-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #60a5fa, #1e3a8a);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.5), inset -5px -5px 15px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.orb-avatar::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 8px;
    width: 15px;
    height: 10px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: rotate(-30deg);
}

.profile-info {
    position: relative;
    z-index: 10;
}

.balance-huge {
    font-size: 2.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    position: relative;
}

.balance-currency {
    font-size: 1.2rem;
    vertical-align: top;
}

.action-btn {
    background: #111827;
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 16px;
    padding: 15px;
    flex: 1;
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(59, 130, 246, 0.1);
    transition: all 0.2s ease;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.action-btn:hover {
    background: #1e293b;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(59, 130, 246, 0.2);
    color: #fff;
}

.action-btn img,
.action-btn i {
    font-size: 1.5rem;
    color: #93c5fd;
}

.action-btn span {
    font-size: 0.9rem;
    font-weight: 600;
}

.asset-legend {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #cbd5e1;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.legend-dot.cyan {
    background: #2dd4bf;
}

.legend-dot.blue {
    background: #60a5fa;
}

.legend-dot.grey {
    background: #94a3b8;
}

.progress-placeholder {
    height: 16px;
    background: #1f2937;
    border-radius: 8px;
    margin-top: 20px;
    width: 40%;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 25px 0 15px;
    padding: 0 5px;
}

.section-header h5 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #f8fafc;
}

.section-header a {
    font-size: 0.8rem;
    color: #cbd5e1;
    text-decoration: none;
}

/* Asset Grid Cards */
.asset-card {
    background: #111827;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px;
    position: relative;
    overflow: hidden;
    /*height: 190px;*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.asset-label {
    color: #f8fafc;
    font-weight: 600;
    font-size: 0.95rem;
    z-index: 10;
    position: relative;
}

.asset-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #f8fafc;
    margin-top: 5px;
    z-index: 10;
    position: relative;
}

.asset-icon-glow {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    filter: blur(25px);
    z-index: 1;
}

.asset-icon-glow.cyan {
    background: rgba(45, 212, 191, 0.4);
}

.asset-icon-glow.blue {
    background: rgba(59, 130, 246, 0.4);
}

.asset-icon-glow.yellow {
    background: rgba(250, 204, 21, 0.3);
}

.asset-icon-render {
    position: absolute;
    bottom: 10px;
    right: 15px;
    font-size: 3.5rem;
    z-index: 2;
    opacity: 0.9;
}

.card-actions {
    /*position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;*/
    display: flex;
    gap: 8px;
    z-index: 10;
}

.card-btn {
    background: #1e293b;
    color: #f8fafc;
    border: none;
    padding:.765rem;
    border-radius: 8px;
   /* font-size: 0.7rem;*/
    font-weight: 600;
    flex: 1;
    text-align: center;
    text-decoration: none;
	transition:all ease .3s;
}
.card-btn:hover{
	opacity:.5;
}

.card-btn.active {
    background: rgba(59, 130, 246, 0.3);
    border: 1px solid rgba(59, 130, 246, 0.5);
    color: #93c5fd;
}

.card-btn i {
    margin-right: 3px;
    color: #64748b;
}
@media(max-width:991px){
	.card-btn{
		font-size:14px;
		padding:10px;
	}
}

/* Gateway Connect Wallet Options */
.wallet-option-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    color: white;
}
.wallet-option-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}
.wallet-option-btn:nth-child(1) { border: 1px solid rgba(246, 133, 27, 0.5); }
.wallet-option-btn:nth-child(2) { border: 1px solid rgba(41, 128, 185, 0.5); }
.wallet-option-btn:nth-child(3) { border: 1px solid rgba(255, 255, 255, 0.3); }
.wallet-option-btn:nth-child(4) { border: 1px solid rgba(59, 153, 252, 0.5); }

/* History View Styles */
body.history-page {
    background-color: #0d121c; /* Deep dark blue/black overriding default body if needed, best left explicit or scoped */
}

/* Minimal Top Header */
.history-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 15px 20px;
    margin-bottom: 5px;
}
.back-btn {
    position: absolute;
    left: 20px;
    color: #f8fafc;
    font-size: 1.2rem;
    text-decoration: none;
    transition: opacity 0.2s;
}
.back-btn:hover {
    opacity: 0.8;
    color: #f8fafc;
}
.history-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #f8fafc;
    margin: 0;
}

/* Tab Navigation */
.history-tabs {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.h-tab {
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 12px 0;
    text-decoration: none;
    position: relative;
    transition: color 0.2s;
}
.h-tab:hover {
    color: #cbd5e1;
}
.h-tab.active {
    color: #3b82f6; /* Blue text for active */
}
.h-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #3b82f6;
}

/* Empty State Wrapper */
.empty-state-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
    min-height: 50vh;
}

/* Illustration container replacing complex SVG with layered CSS for folder + magnifying glass */
.illustration {
    position: relative;
    width: 130px;
    height: 100px;
    margin-bottom: 25px;
}

/* Left folder back */
.folder-back {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100px;
    height: 75px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(124, 58, 237, 0.1));
    border: 2px solid rgba(59, 130, 246, 0.4);
    border-radius: 8px 15px 8px 8px;
    transform: skewX(-10deg);
    box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.2);
}

/* Front glass file */
.folder-front {
    position: absolute;
    bottom: 0;
    right: 15px;
    width: 100px;
    height: 80px;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.3));
    border: 1px solid rgba(96, 165, 250, 0.5);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.5), inset 2px 2px 10px rgba(255, 255, 255, 0.1);
    z-index: 2;
    overflow: hidden;
}
/* Inner glint for the glass folder */
.folder-front::before {
    content: '';
    position: absolute;
    top: 0; left: -50%; width: 200%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
}

/* Floating Magnifying Glass */
.floating-glass {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), rgba(59, 130, 246, 0.2));
    border: 4px solid #64748b;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 5;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(255,255,255,0.2);
}
/* Handle of the magnifying glass */
.floating-glass::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 8px;
    height: 25px;
    background: #94a3b8;
    border-radius: 4px;
    transform: rotate(-45deg);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
/* Grid reflection on the glass */
.floating-glass::before {
    content: '';
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    border-radius: 50%;
    background-size: 8px 8px;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    mask-image: radial-gradient(circle, white 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, white 40%, transparent 100%);
}

/* Text */
.empty-h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: #38bdf8;
    margin-bottom: 8px;
}
.empty-p {
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 400;
}

/* Marketplace View Styles */

/* Total Income Card */
.income-card {
    background: #111827;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 25px;
    position: relative;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.income-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(37, 99, 235, 0.4), transparent);
    pointer-events: none;
}

.income-content {
    position: relative;
    z-index: 10;
}

.income-label {
    font-size:1rem;
    color:#cbd5e18c;
}

.income-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #f8fafc;
}

.income-value small {
    font-size: 0.9rem;
    font-weight: 600;
}

.history-btn {
    background: rgba(30, 64, 175, 0.5);
    border: 1px solid rgba(59, 130, 246, 0.4);
    padding: 8px 16px;
    border-radius: 12px;
    color: #f8fafc;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: background 0.2s;
    text-align: center;
}

.history-btn:hover {
    color: #fff;
    background: rgba(30, 64, 175, 0.7);
}

.income-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.income-grid .income-value {
    font-size: 1.25rem;
    margin-bottom: 0;
}
.income-grid-col{
	word-break: break-word;
	overflow-wrap: break-word;
}
@media(max-width:768px){
	.income-card{
		padding:15px;
	}
	.income-label{
		font-size:14px;
	}
}

/* Custom Navbar inside the view */
.tab-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
}

.tab-btn {
    flex: 1;
    text-align: center;
    color: #f8fafc;
    font-weight: 600;
    font-size:1rem;
    padding: 12px 5px;
    text-decoration: none;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
	opacity:.5;
	transition:all ease .3s;
}
.tab-btn:hover{
	opacity:1;
}
.tab-btn.active {
    background: rgba(30, 64, 175, 0.4);
    border: 1px solid rgba(59, 130, 246, 0.4);
    box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.2), 0 5px 15px rgba(0, 0, 0, 0.3);
    color: #f8fafc;
	opacity:1;
}
@media(max-width:768px){
	.tab-btn {
		font-size:.8rem;
	}
}

/* Sub Card (Package) */
.sub-card {
    background: #111827;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 24px;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.sub-card:before{
	content:'';
	position:absolute;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background:url(../images/sub-card-bg.png);
	background-size:cover;
	background-position:top center;
	opacity:.35;
	animation-name:fade-in-line;
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
@keyframes fade-in-line{
	0%{opacity:.25;}
	50%{opacity:.5;}
	100%{opacity:.25;}
}
.sub-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(circle at 100% 50%, rgba(59, 130, 246, 0.2), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.sub-card-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Metallic Pill Badges */
.metallic-badge {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #0b0f19;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 50%, #94a3b8 100%);
    box-shadow: inset -2px -2px 5px rgba(0, 0, 0, 0.3), inset 2px 2px 5px rgba(255, 255, 255, 0.8);
}

.metallic-badge.gold {
    background: linear-gradient(135deg, #fef08a 0%, #facc15 50%, #eab308 100%);
}

.pkg-title {
    font-size: 1rem;
    font-weight: 500;
    color: #f8fafc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pkg-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: #f8fafc;
    margin-bottom: 15px;
}

/* How It Works List */
.hiw-title {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 12px;
}

.hiw-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.hiw-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.85rem;
    color: #f8fafc;
    font-weight: 500;
    line-height: 1.4;
}

.hiw-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
    margin-top: 2px;
}

.btn-invest {
    width: 100%;
    background: rgba(30, 64, 175, 0.4);
    border: 1px solid rgba(59, 130, 246, 0.4);
    color: #fff;
    font-weight: 700;
    border-radius: 12px;
    padding: 14px;
    font-size: 1rem;
    transition: all 0.2s ease;
    box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.2), 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn-invest:hover {
    background: rgba(30, 64, 175, 0.6);
    color: #fff;
}
.btn-invest:disabled{
	cursor: not-allowed;
	opacity: 0.35;
}

/* Bonus View Styles */
.bonus-card {
    background: linear-gradient(160deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.bonus-card:before{
	content:'';
	position:absolute;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background:url(../images/sub-card-bg.png);
	background-size:cover;
	background-position:top center;
	opacity:.35;
	animation-name:fade-in-line;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
.bonus-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(circle at 100% 50%, rgba(59, 130, 246, 0.2), transparent 70%);
    pointer-events: none;
    z-index: 0;
}
.bonus-pkg-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: #f8fafc;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.bonus-pkg-price {
    font-size: 1.25rem;
    font-weight: 800;
    color: #f8fafc;
}
.bonus-cube-icon {
    position: absolute;
    right: 5px;
    top: 20px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    color: rgba(99, 210, 255, 0.4);
    filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
}
.bonus-btn {
    background: linear-gradient(180deg, rgba(59,130,246,0.3) 0%, rgba(30,64,175,0.8) 100%);
    border: 1px solid rgba(59, 130, 246, 0.5);
    border-radius: 12px;
    padding: 12px;
    width: 100%;
    color: white;
    font-weight: 700;
    margin-top: 30px;
}

/* Profile View Styles */
.profile-card {
    background: #111827;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 25px 25px 0;
    /* No bottom padding because the grid cuts off or we fit it in */
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
}

.profile-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(37, 99, 235, 0.3), transparent);
    pointer-events: none;
    z-index: 0;
}

.profile-card-content {
    position: relative;
    z-index: 10;
    padding-bottom: 25px;
}

.profile-top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.avatar-glass {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #60a5fa, #1e3a8a);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6), inset -5px -5px 15px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.avatar-glass::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 10px;
    width: 25px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transform: rotate(-30deg);
}

.avatar-icon-inner {
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.7);
}

.profile-name-label {
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-bottom: 2px;
}

.profile-name-value {
    font-size: 1.4rem;
    font-weight: 800;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-name-value i {
    font-size: 0.8rem;
    color: #cbd5e1;
    cursor: pointer;
}

.card-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 20px -25px;
}

.profile-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.stat-label {
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-bottom: 5px;
}

.stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    display: flex;
    align-items: center;
    gap: 8px;
}

.copy-icon {
    color: #94a3b8;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s;
}

.copy-icon:hover {
    color: #60a5fa;
}

/* Menu List */
.profile-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.profile-menu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-menu li:last-child {
    border-bottom: none;
}

.menu-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px;
    color: #f8fafc;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 500;
    transition: background 0.2s;
    border-radius: 12px;
}

.menu-link:hover {
    background: rgba(255, 255, 255, 0.03);
    color: #63d2ff;
}

.menu-link i {
    color: #94a3b8;
    font-size: 0.9rem;
}
@media(max-width:768px){
	.menu-link{
		font-size:15px;
		padding: 15px 10px;
	}
}

/* Language Selection Style */
.lang-option {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 12px;
    color: #94a3b8;
    text-decoration: none;
    transition: all 0.2s;
}

.lang-option:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

.lang-option .radio-indicator {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #475569;
    position: relative;
    transition: all 0.2s;
}

.lang-option.active {
    background: rgba(56, 189, 248, 0.05);
    border-color: rgba(56, 189, 248, 0.1);
    color: #38bdf8;
}

.lang-option.active .radio-indicator {
    border-color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.lang-option.active .radio-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #38bdf8;
    border-radius: 50%;
    box-shadow: 0 0 8px #38bdf8;
}

/* PST History View Styles & Global History Elements */
.history-header {
    display: flex;
    align-items: center;
    padding: 10px 15px 25px;
    position: relative;
}

.history-header .back-btn {
    color: #f8fafc;
    font-size: 1.15rem;
    text-decoration: none;
    position: absolute;
    left: 20px;
}

.history-header .title {
    color: #f8fafc;
    font-size: 1.05rem;
    font-weight: 500;
    text-align: center;
    width: 100%;
    margin: 0;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 55vh;
    text-align: center;
}

.empty-state-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 30px;
    position: relative;
}

.empty-state-icon-base {
    position: absolute;
    width: 65px;
    height: 65px;
    background: #1e293b;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    transform: rotate(-10deg);
    top: 0;
    left: 5px;
}

.empty-state-icon-top {
    position: absolute;
    width: 68px;
    height: 65px;
    background: rgba(14, 165, 233, 0.15);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    border: 1px solid rgba(14, 165, 233, 0.5);
    top: 15px;
    left: 25px;
    z-index: 2;
}

.empty-state-lens {
    position: absolute;
    bottom: -5px;
    right: 0px;
    font-size: 3.5rem;
    color: #f8fafc;
    z-index: 3;
    text-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.empty-state-title {
    color: #0ea5e9;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-state-desc {
    color: #94a3b8;
    font-size: 0.95rem;
}

.transaction-card {
    background: #111827;
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Referral View Styles */
/* Top Header */
.ref-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 15px 20px;
	max-width:660px;
	margin:0 auto 10px;
}
.back-btn {
    position: absolute;
    left: 20px;
    color: #f8fafc;
    font-size: 1.2rem;
    text-decoration: none;
    transition: opacity 0.2s;
}
.back-btn:hover {
    opacity: 0.8;
    color: #f8fafc;
}
.ref-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
}

/* Card Wrapper */
.ref-card {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 30px 20px;
    margin: 0 auto;
	max-width:660px;
}

/* QR Code styling */
.qr-title {
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 20px;
}
.qr-container {
    display: flex;
    justify-content: center;
    margin-bottom: 35px;
}
.qr-wrapper {
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.qr-wrapper img {
    display: block;
    width: 150px;
    height: 150px;
    border-radius: 8px;
}

/* Input Fields */
.input-label {
    font-size: 0.85rem;
    color: #cbd5e1;
    margin-bottom: 8px;
    display: block;
}
.copy-input-wrapper {
    position: relative;
    margin-bottom: 25px;
}
.copy-input {
    width: 100%;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #f8fafc;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 14px 50px 14px 16px; /* Space for icon */
    outline: none;
}
.copy-input:focus {
    border-color: rgba(59, 130, 246, 0.5);
}
.copy-icon-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.2s;
}
.copy-icon-btn:hover {
    color: #f8fafc;
}

/* Share Button */
.share-btn {
    width: 100%;
    background: linear-gradient(180deg, rgba(59,130,246,0.3) 0%, rgba(30,64,175,0.8) 100%);
    border: 1px solid rgba(59, 130, 246, 0.5);
    color: white;
    font-weight: 700;
    font-size: 1.05rem;
    border-radius: 10px;
    padding: 14px 0;
    text-align: center;
    cursor: pointer;
    transition: 0.2s all;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* Toast for copying */
#copyToast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(16, 185, 129, 0.9);
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    display: none;
    z-index: 1050;
    backdrop-filter: blur(5px);
}

/* Subscribe History View Styles */
.history-tabs {
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.h-tab {
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 12px 15px;
    text-decoration: none;
    position: relative;
    transition: color 0.2s;
    flex: 1;
    text-align: center;
}
.h-tab:hover {
    color: #cbd5e1;
}
.h-tab.active {
    color: #3b82f6; /* Blue text for active */
}
.h-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 20%;
    right: 20%;
    height: 2px;
    background-color: #3b82f6;
}

/* Filter Section */
.filter-section {
    padding: 0 20px;
    margin-bottom: 30px;
}
.filter-label {
    color: #f8fafc;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}
.date-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}
.date-input-wrap {
    flex: 1;
}
.date-input-wrap input {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #f8fafc;
    padding: 10px;
    font-size: 0.85rem;
    outline: none;
}
.date-input-wrap input:focus {
    border-color: #3b82f6;
}
.date-separator {
    color: #f8fafc;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Empty State Wrapper */
.empty-state-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
    min-height: 40vh;
}

/* Illustration container replacing complex SVG with layered CSS for folder + magnifying glass */
.illustration {
    position: relative;
    width: 130px;
    height: 100px;
    margin-bottom: 25px;
}

/* Left folder back */
.folder-back {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100px;
    height: 75px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(124, 58, 237, 0.1));
    border: 2px solid rgba(59, 130, 246, 0.4);
    border-radius: 8px 15px 8px 8px;
    transform: skewX(-10deg);
    box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.2);
}

/* Front glass file */
.folder-front {
    position: absolute;
    bottom: 0;
    right: 15px;
    width: 100px;
    height: 80px;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.9), rgba(30, 64, 175, 0.3));
    border: 1px solid rgba(96, 165, 250, 0.5);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: -5px 10px 20px rgba(0, 0, 0, 0.5), inset 2px 2px 10px rgba(255, 255, 255, 0.1);
    z-index: 2;
    overflow: hidden;
}
/* Inner glint for the glass folder */
.folder-front::before {
    content: '';
    position: absolute;
    top: 0; left: -50%; width: 200%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    transform: rotate(45deg);
}

/* Floating Magnifying Glass */
.floating-glass {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), rgba(59, 130, 246, 0.2));
    border: 4px solid #64748b;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 5;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(255,255,255,0.2);
}
/* Handle of the magnifying glass */
.floating-glass::after {
    content: '';
    position: absolute;
    bottom: -15px;
    right: -15px;
    width: 8px;
    height: 25px;
    background: #94a3b8;
    border-radius: 4px;
    transform: rotate(-45deg);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
/* Grid reflection on the glass */
.floating-glass::before {
    content: '';
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    border-radius: 50%;
    background-size: 8px 8px;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    mask-image: radial-gradient(circle, white 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle, white 40%, transparent 100%);
}

/* =========================================================================
   Trade View Styles
   ========================================================================= */

/* Complex Trading Card shape */
.trade-card-wrapper {
    position: relative;
    margin-bottom: 30px;
    /*padding-top: 35px; /* space for the absolute tab */
}

.trade-page .history-tab {
    /*position: absolute;
    top: 0;
    right: 0;*/
    background: rgba(30, 64, 175, 0.4);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 12px;
    color: #93c5fd;
    padding: 10px 24px;
    font-weight: 500;
    font-size: 0.95rem;
    box-shadow: inset 0 0 15px rgba(59, 130, 246, 0.2), 0 5px 15px rgba(0,0,0,0.3);
    z-index: 10;
    text-decoration: none;
    backdrop-filter: blur(10px);
}

.trade-page .history-tab:hover {
    color: #fff;
    background: rgba(30, 64, 175, 0.6);
}

.trade-card {
    background: #111827;
    /* The screenshot shows a cutout, but CSS cutouts are hard. 
       We use a border-radius trick: border-top-right is very large to look like a cutout, 
       or we just keep it normal 20px and let the tab sit above it like a folder tab. 
       Let's use the folder tab approach for better compatibility and clean UI. */
    border-radius: 20px;
    /*border-top-right-radius: 60px; /* Slight cutout illusion */
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 30px 25px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.trade-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(37, 99, 235, 0.15), transparent);
    pointer-events: none;
    z-index: 0;
}

/* Subtle grid background */
.trade-page .grid-bg {
    background-size: 30px 30px;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0;
}

.trade-card-content {
    position: relative;
    z-index: 10;
}

.trade-page .card-dropdown-arrow {
    text-align: center;
    color: #94a3b8;
    margin-bottom: 20px;
}

.trade-page .balance-huge {
    font-size: 3.2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    margin-bottom: 30px;
}

.trade-page .balance-currency {
    font-size: 1rem;
	font-weight:500;
    vertical-align: top;
}
@media(max-width:768px){
	.trade-page .history-tab{
		font-size:14px;
	}
	.trade-page .balance-huge{
		font-size:2rem;
	}
}
/* 2x2 Grid for Stats */
.trade-page .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.trade-page .stat-label {
    font-size: 0.85rem;
    color:#cbd5e17d;
	margin-bottom:0;
}

.trade-page .stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #f8fafc;
}

.trade-page .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 30px;
    padding: 0 5px;
}

.trade-page .section-header h5 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #f8fafc;
}

.trade-page .section-header a {
    font-size: 0.85rem;
    color: #f8fafc;
    text-decoration: none;
    font-weight: 500;
}
@media(max-width:991px){
	.trade-page .stat-value{
		font-size:1.25rem;
	}
}

/* Empty state graphic */
.trade-page .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
}

.trade-page .empty-state-icon-wrapper {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Replicating the 3D magnifying glass floating over glass screens with pure CSS & icons */
.trade-page .glass-rect-1 {
    position: absolute;
    width: 80px; height: 60px;
    background: linear-gradient(135deg, rgba(59,130,246,0.3), rgba(0,243,255,0.1));
    border: 1px solid rgba(96,165,250,0.4);
    border-radius: 8px;
    transform: rotate(-15deg) translate(-10px, 10px);
    backdrop-filter: blur(5px);
}
.trade-page .glass-rect-2 {
    position: absolute;
    width: 80px; height: 60px;
    background: linear-gradient(135deg, rgba(59,130,246,0.3), rgba(0,243,255,0.1));
    border: 1px solid rgba(96,165,250,0.5);
    border-radius: 8px;
    transform: rotate(5deg) translate(10px, -5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.trade-page .mag-glass-icon {
    position: absolute;
    font-size: 3.5rem;
    color: #cbd5e1;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5), 0 0 15px rgba(96,165,250,0.5);
    transform: rotate(15deg) translate(15px, 15px);
    z-index: 5;
}

.trade-page .empty-state h3 {
    font-size: 1.3rem;
    font-weight: 800;
    color: #38bdf8;
    text-shadow: 0 0 10px rgba(56,189,248,0.5);
    margin: 0;
}

/* =========================================================================
   Active Position View Styles
   ========================================================================= */

.trade-active-position-page,
.trade-history-page {
    /*background-color: #0f172a; /* dark blue/black background */
    min-height: 100vh;
}

.trade-active-position-page .top-header,
.trade-history-page .top-header {
    display: flex;
    align-items: center;
    padding: 20px;
    color: white;
    position: relative;
}

.trade-active-position-page .back-btn,
.trade-history-page .back-btn {
    color: white;
    font-size: 1.2rem;
    text-decoration: none;
    position: absolute;
    left: 20px;
}

.trade-active-position-page .page-title,
.trade-history-page .page-title {
    width: 100%;
    text-align: center;
    font-weight: 500;
    font-size: 1.1rem;
    margin: 0;
}

.trade-active-position-page .empty-state,
.trade-history-page .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 70vh;
}

.trade-active-position-page .empty-state-icon-wrapper,
.trade-history-page .empty-state-icon-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trade-active-position-page .glass-rect-1,
.trade-history-page .glass-rect-1 {
    position: absolute;
    width: 60px; height: 50px;
    background: linear-gradient(135deg, rgba(59,130,246,0.3), rgba(0,243,255,0.1));
    border: 1px solid rgba(96,165,250,0.4);
    border-radius: 6px;
    transform: rotate(-15deg) translate(-10px, 10px);
    backdrop-filter: blur(5px);
}

.trade-active-position-page .glass-rect-2,
.trade-history-page .glass-rect-2 {
    position: absolute;
    width: 65px; height: 50px;
    background: linear-gradient(135deg, rgba(59,130,246,0.4), rgba(0,243,255,0.2));
    border: 1px solid rgba(96,165,250,0.6);
    border-radius: 6px;
    transform: rotate(5deg) translate(10px, -5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.trade-active-position-page .mag-glass-icon,
.trade-history-page .mag-glass-icon {
    position: absolute;
    font-size: 2.5rem;
    color: #e2e8f0;
    text-shadow: 0 5px 15px rgba(0,0,0,0.5), 0 0 15px rgba(96,165,250,0.5);
    transform: rotate(15deg) translate(15px, 15px);
    z-index: 5;
}

.trade-active-position-page .empty-state h3,
.trade-history-page .empty-state h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #38bdf8;
    margin-bottom: 8px;
}

.trade-active-position-page .empty-state p,
.trade-history-page .empty-state p {
    color: #94a3b8;
    font-size: 0.9rem;
}

/* =========================================================================
   Team View Styles
   ========================================================================= */

/* ── Page wrapper ── */
.team-page {
    max-width:900px;
    margin: 0 auto;
    padding: 0 0 3rem;
}

/* ── Search bar ── */
.team-page .team-search-wrap {
    display: flex;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}
.team-page .team-search-input {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    color: #fff;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
}
.team-page .team-search-input::placeholder { color: rgba(255,255,255,0.3); }
.team-page .team-search-input:focus { border-color: rgba(99,210,255,0.45); }
.team-page .team-search-btn {
    background: linear-gradient(135deg, #1a6ea8, #1e4e8c);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.75rem 1.4rem;
    cursor: pointer;
    transition: opacity 0.2s;
    white-space: nowrap;
}
.team-page .team-search-btn:hover { opacity: 0.85; }

/* ── Profile stats card ── */
.team-page .profile-stats-card {
    position: relative;
    background: linear-gradient(160deg, #0f2848 0%, #0a1f40 40%, #0d2b55 70%, #0f3568 100%);
    border: 1px solid rgba(99,180,255,0.18);
    border-radius: 20px;
    padding: 1.5rem 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    overflow: visible;
}
.team-page .profile-stats-card:before{
	content:'';
	position:absolute;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background:url(../images/sub-card-bg.png);
	background-size:cover;
	background-position:top center;
	opacity:.35;
	animation-name:fade-in-line;
	animation-duration: 5s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}
.team-page .profile-stats-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: radial-gradient(circle at 100% 50%, rgba(59, 130, 246, 0.2), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Floating crystal gem (top-right decoration) */
.team-page .profile-stats-card .gem-icon {
    position: absolute;
    top: -18px;
    right: 10px;
    width: 90px;
    height: 90px;
    pointer-events: none;
    filter: drop-shadow(0 4px 20px rgba(100,180,255,0.5));
}

.team-page .card-level-label {    
    color: rgba(255,255,255,0.55);
	/*font-size: 0.78rem;
    margin-bottom: 0.2rem;*/
    letter-spacing: 0.03em;
}
.team-page .card-wallet-address {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.75rem;
    letter-spacing: 0.02em;
}
.team-page .card-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 1.1rem;
}

/* Two-column stats grid */
.team-page .card-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 0;
}
.team-page .card-stat-item .stat-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.5);
    margin-bottom: 0;
}
.team-page .card-stat-item .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

/* Direct Downline spans full-width */
.team-page .card-stat-item.full-width {
    grid-column: 1 / -1;
}

/* ── Separator line ── */
.team-page .section-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.07);
    margin: 0.5rem 0 2rem;
}

/* ── Empty / results state ── */
.team-page .empty-state {
    text-align: center;
    padding: 3rem 1rem 2rem;
}
.team-page .empty-state .empty-icon {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.25rem;
    filter: drop-shadow(0 4px 20px rgba(80,140,255,0.4));
}
.team-page .empty-state .empty-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #63d2ff;
    margin-bottom: 0.4rem;
}
.team-page .empty-state .empty-sub {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.45);
}

/* ── Downline member list - when results show ── */
.team-page .downline-item {
    background: rgba(15,22,41,0.6);
    border: 1px solid rgba(99,180,255,0.12);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.team-page .downline-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
}
.team-page .downline-address {
    font-size: 0.875rem;
    font-weight: 600;
    color: #e2e8f0;
}
.team-page .downline-level-badge {
    font-size: 0.7rem;
    background: rgba(99,210,255,0.12);
    border: 1px solid rgba(99,210,255,0.25);
    color: #63d2ff;
    border-radius: 5px;
    padding: 0.15rem 0.45rem;
    margin-top: 0.2rem;
    display: inline-block;
}
.team-page .downline-date {
    margin-left: auto;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
}

/*** CUSTOM CSS ***/
/*** utilities css ***/
/*** Button css ***/
.btn-confirm{
	background:#2179e7; 
	color: white; 
	border-radius: 12px; 
	font-weight: 600; 
	padding: 15px; 
	font-size: 1.05rem;
	transition:all ease .3s;
}
.btn-confirm:hover{
	background:#104485;
}
/*** Connect wallet page ***/
.welcome-logo{
	width:100%;
	max-width:250px;
	margin-bottom:10px;
}
/*** Layout ui ***/
.main-bg:before{
	content:'';
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.85);
}
.main-bg:after{
	content:'';
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../images/ps-main-bg.jpg);
	background-position:center top;
	background-size:cover;
	z-index:-1;
}
.layout-logo{
	width:100%;
	max-width:200px;
}
.topheader-logo{
	width:100%;
	max-width:152px;
}
/*** Dashboard ***/
.usdt-wallet-card{
	position:relative;
}
.usdt-wallet-card:before{
	content:'';
	position:absolute;
	top:-25px;
	right:-25px;
	width:125px;
	height:125px;
	background:url(../images/coin-icon-USDT.png);
	background-position:center;
	background-size:cover;
}
.pst-wallet-card{
	position:relative;
}
.pst-wallet-card:before{
	content:'';
	position:absolute;
	top:-25px;
	right:-25px;
	width:125px;
	height:125px;
	background:url(../images/coin-icon-PST.png);
	background-position:center;
	background-size:cover;
}
@media(max-width:768px){
	.usdt-wallet-card:before, .pst-wallet-card:before{
		width:100px;
		height:100px;
	}
}
/*** Marketpalce ***/
.modal.show{
    background: rgba(21, 34, 45, .2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);	
}
.invest-modal .modal-content{
	background: rgba(21, 34, 45, .2);
	position: relative;
    border-radius: 16px;
    padding: 36px 24px;
	box-shadow: inset 0 0 17.353px 0 hsla(0, 0%, 100%, .12);
	border:none;
}
.invest-modal .modal-content:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
   /* border: 1px solid;*/
    background: linear-gradient(236.59deg, hsla(0, 0%, 60%, .6) 24.67%, hsla(0, 0%, 60%, .05) 86.22%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
@media(max-width:500px){
	.invest-modal .modal-content{
		padding:15px;
	}
}
/*** Trade ***/
.custom-select {
	position: relative;
	font-size: 14px;
}
.select-selected {
	padding: 12px 16px;
	border-radius: 12px;
	background: #0f172a;
	color: #fff;
	cursor: pointer;
	border: 1px solid #1e293b;
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-width:120px;
}
.select-selected::after {
	content: "▾";
	font-size: 12px;
}
.select-options {
	position: absolute;
	width: 100%;
	background: #0f172a;
	border-radius: 12px;
	margin-top: 6px;
	overflow: hidden;
	border: 1px solid #1e293b;
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
	transition: all 0.2s ease;
	z-index:1;
}
.custom-select.active .select-options {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.select-options div {
	padding: 12px 16px;
	cursor: pointer;
	transition: background 0.2s;
}
.select-options div:hover {
	background: #1e293b;
}
/*** Team ***/
.team-page .profile-stats-card .diamond-icon {
    position: absolute;
	top: -50px;
    right: -30px;
    width: 165px;
    height: 165px;
    pointer-events: none;
    filter: drop-shadow(0 4px 20px rgba(100, 180, 255, 0.5));
}
@media(max-width:768px){
	.team-page .profile-stats-card .diamond-icon {
		width:120px;
		height:120px;
	}
}
/*** Profile ***/
.profile-wrapper{
	max-width:900px;
	margin:0 auto;
}