/* =========================================
   AITHUB — Purple Web3 / Glassmorphism UI
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --bg: #080510;
    --bg-2: #10081c;
    --card: rgba(25, 14, 42, 0.72);
    --card-border: rgba(168, 85, 247, 0.25);

    --purple: #a855f7;
    --purple-light: #c084fc;
    --purple-dark: #7e22ce;

    --pink: #ec4899;
    --cyan: #22d3ee;

    --text: #f8f7ff;
    --muted: #aaa2ba;

    --success: #4ade80;
    --danger: #fb7185;

    --shadow:
        0 0 30px rgba(168, 85, 247, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* =========================================
   Reset
   ========================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: "Inter", sans-serif;
    color: var(--text);

    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(168, 85, 247, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(236, 72, 153, 0.12),
            transparent 25%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(126, 34, 206, 0.18),
            transparent 35%
        ),
        linear-gradient(135deg, var(--bg), var(--bg-2));

    background-attachment: fixed;
}

/* Subtle background grid */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;

    background-image:
        linear-gradient(
            rgba(168, 85, 247, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(168, 85, 247, 0.035) 1px,
            transparent 1px
        );

    background-size: 40px 40px;
}

/* =========================================
   MODERN APP NAVBAR
   ========================================= */

#header {
    position: sticky;
    top: 0;
    z-index: 1000;

    height: 68px;
    width: 100%;

    display: flex;
    align-items: center;

    padding: 0 28px;

    background: rgba(8, 5, 16, 0.86);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    border-bottom: 1px solid rgba(255,255,255,0.06);

    box-shadow:
        0 8px 30px rgba(0,0,0,0.25);
}


/* Logo */

#brand {
    display: flex;
    align-items: center;

    min-width: 130px;
}

#appTitle {
    margin: 0;

    font-size: 21px;
    font-weight: 800;

    letter-spacing: 2px;

    background:
        linear-gradient(
            90deg,
            #c084fc,
            #a855f7,
            #ec4899
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* Page name */

#pageName {
    margin-left: 25px;

    padding-left: 25px;

    border-left:
        1px solid rgba(255,255,255,0.08);
}

#currentPage {
    color: #eeeaff;

    font-size: 15px;
    font-weight: 600;
}


/* Right side */

#headerRight {
    margin-left: auto;

    display: flex;
    align-items: center;

    gap: 10px;
}


/* Online status */

#networkStatus {
    display: flex;
    align-items: center;
    gap: 7px;

    padding: 8px 11px;

    border-radius: 9px;

    background: rgba(74,222,128,0.06);

    border: 1px solid rgba(74,222,128,0.12);
}

#networkName {
    margin: 0;

    padding: 0;

    border: 0;

    background: none;

    color: #86efac;

    font-size: 11px;
    font-weight: 600;
}

.onlineDot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #4ade80;

    box-shadow:
        0 0 10px rgba(74,222,128,0.9);
}


/* Wallet */

#walletAddress {
    max-width: 120px;

    margin: 0;

    padding: 8px 11px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: #aaa2ba;

    font-size: 11px;

    background:
        rgba(255,255,255,0.035);

    border:
        1px solid rgba(255,255,255,0.07);

    border-radius: 9px;
}


/* Connect */

#connectWalletButton {
    padding: 10px 16px;

    border-radius: 10px;

    font-size: 12px;

    background:
        linear-gradient(
            135deg,
            #a855f7,
            #ec4899
        );

    box-shadow:
        0 5px 20px rgba(168,85,247,0.25);
}


/* =========================================
   MENU BUTTON
   ========================================= */

#menuButton {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    font-size: 18px;

    background:
        rgba(255,255,255,0.045);

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius: 10px;

    box-shadow: none;
}

#menuButton:hover {
    background:
        rgba(168,85,247,0.12);

    transform: none;
}


/* =========================================
   SIDEBAR
   ========================================= */

#sidebar {
    position: fixed;

    top: 0;
    left: 0;

    z-index: 2000;

    width: 260px;
    height: 100vh;

    padding: 22px 14px;

    background:
        rgba(12,7,20,0.97);

    border-right:
        1px solid rgba(168,85,247,0.14);

    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    box-shadow:
        15px 0 50px rgba(0,0,0,0.4);

    transform: translateX(-105%);

    transition:
        transform 0.28s cubic-bezier(.4,0,.2,1);
}

#sidebar.open {
    transform: translateX(0);
}


/* Sidebar header */

.sidebarHeader {
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 10px;

    margin-bottom: 25px;

    color: #c084fc;

    font-size: 18px;
    font-weight: 800;

    letter-spacing: 2px;
}

#closeSidebar {
    width: 32px;
    height: 32px;

    padding: 0;

    font-size: 22px;

    color: #aaa2ba;

    background:
        rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.06);

    box-shadow: none;
}


/* Sidebar links */

#sidebarNav {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.sideLink {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 12px 13px;

    color: #9f97ad;

    text-decoration: none;

    font-size: 13px;
    font-weight: 500;

    border-radius: 11px;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.sideLink span:first-child {
    width: 20px;

    text-align: center;

    color: #8b5cf6;

    font-size: 15px;
}

.sideLink:hover {
    color: white;

    background:
        rgba(168,85,247,0.08);
}

.sideLink.active {
    color: white;

    background:
        linear-gradient(
            90deg,
            rgba(168,85,247,0.18),
            rgba(168,85,247,0.05)
        );

    border:
        1px solid rgba(168,85,247,0.12);
}


/* =========================================
   OVERLAY
   ========================================= */

#sidebarOverlay {
    position: fixed;

    inset: 0;

    z-index: 1500;

    background:
        rgba(0,0,0,0.55);

    backdrop-filter: blur(2px);

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.25s ease;
}

#sidebarOverlay.open {
    opacity: 1;

    pointer-events: auto;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

    #header {
        height: 60px;

        padding: 0 12px;
    }

    #brand {
        min-width: auto;
    }

    #appTitle {
        font-size: 17px;
    }

    #pageName {
        margin-left: 15px;
        padding-left: 15px;
    }

    #currentPage {
        font-size: 13px;
    }

    #headerRight {
        gap: 5px;
    }

    #networkStatus {
        padding: 7px 8px;
    }

    #networkName {
        display: none;
    }

    #walletAddress {
        max-width: 75px;

        padding: 7px 8px;
    }

    #connectWalletButton {
        padding: 9px 11px;

        font-size: 10px;
    }

    #menuButton {
        width: 34px;
        height: 34px;
    }
}


/* Tiny phones */

@media (max-width: 400px) {

    #pageName {
        display: none;
    }

    #walletAddress {
        max-width: 65px;
    }

    #connectWalletButton {
        padding: 8px 9px;
    }
}

#dashboard {
    width: min(1400px, 92%);
    margin: 50px auto;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

/* =========================================
   Cards / Sections
   ========================================= */

#dashboard section {
    position: relative;

    padding: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(40, 20, 65, 0.82),
            rgba(17, 9, 29, 0.78)
        );

    border: 1px solid var(--card-border);
    border-radius: 22px;

    box-shadow: var(--shadow);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    overflow: hidden;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

/* Purple glow inside cards */

#dashboard section::before {
    content: "";

    position: absolute;
    width: 180px;
    height: 180px;

    top: -100px;
    right: -80px;

    background: var(--purple);
    opacity: 0.08;

    border-radius: 50%;
    filter: blur(40px);

    pointer-events: none;
}

#dashboard section:hover {
    transform: translateY(-4px);

    border-color: rgba(192, 132, 252, 0.45);

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.35),
        0 0 35px rgba(168, 85, 247, 0.14);
}

/* First dashboard card spans full width */

#userSection {
    grid-column: 1 / -1;
}

/* =========================================
   Section Titles
   ========================================= */

section h2 {
    position: relative;

    margin-bottom: 22px;

    font-size: 20px;
    font-weight: 700;

    letter-spacing: -0.3px;
}

section h2::after {
    content: "";

    display: block;

    width: 42px;
    height: 3px;

    margin-top: 9px;

    border-radius: 10px;

    background: linear-gradient(
        90deg,
        var(--purple),
        var(--pink)
    );

    box-shadow: 0 0 12px rgba(168, 85, 247, 0.7);
}

/* =========================================
   Dashboard Information
   ========================================= */

#userInfo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;

    margin: 20px 0;
}

#userInfo p {
    min-height: 70px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 15px;

    color: var(--text);

    background: rgba(168, 85, 247, 0.06);

    border: 1px solid rgba(168, 85, 247, 0.13);
    border-radius: 14px;

    font-size: 14px;
}

/* =========================================
   Paragraphs / Status
   ========================================= */

section p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

#userStatus,
#dashboardStatus,
#approveStatus,
#usdtStatus,
#stakeStatus,
#investorWithdrawStatus,
#poolWithdrawStatus,
#statsStatus,
#historyStatus,
#globalStatus {
    margin-top: 12px;
}

#globalStatus {
    text-align: center;
    color: var(--purple-light);
}

/* =========================================
   Inputs
   ========================================= */

input {
    width: 100%;

    margin-bottom: 12px;
    padding: 14px 16px;

    color: var(--text);
    background: rgba(5, 2, 12, 0.65);

    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 12px;

    outline: none;

    font-family: inherit;
    font-size: 14px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

input::placeholder {
    color: #777080;
}

input:focus {
    background: rgba(168, 85, 247, 0.06);

    border-color: var(--purple);

    box-shadow:
        0 0 0 3px rgba(168, 85, 247, 0.1),
        0 0 20px rgba(168, 85, 247, 0.12);
}

/* =========================================
   Buttons
   ========================================= */

button {
    position: relative;

    border: none;
    outline: none;

    padding: 12px 20px;

    border-radius: 12px;

    color: white;

    background:
        linear-gradient(
            135deg,
            #9333ea,
            #7e22ce
        );

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 8px 25px rgba(126, 34, 206, 0.28);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

button:hover {
    transform: translateY(-2px);

    filter: brightness(1.15);

    box-shadow:
        0 10px 30px rgba(168, 85, 247, 0.4),
        0 0 20px rgba(168, 85, 247, 0.2);
}

button:active {
    transform: translateY(0);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.45;

    transform: none;

    box-shadow: none;
}

/* Connect wallet */

#connectWalletButton {
    padding: 12px 22px;

    background:
        linear-gradient(
            135deg,
            #a855f7,
            #ec4899
        );

    box-shadow:
        0 0 20px rgba(168, 85, 247, 0.3);
}

/* Main stake button */

#stakeButton {
    width: 100%;
    margin-top: 10px;

    padding: 15px;

    font-size: 15px;

    background:
        linear-gradient(
            135deg,
            #a855f7,
            #7e22ce,
            #6d28d9
        );

    box-shadow:
        0 0 25px rgba(168, 85, 247, 0.3);
}

/* =========================================
   Special Status Colors
   ========================================= */

#stakeStatus,
#approveStatus,
#dashboardStatus,
#statsStatus,
#historyStatus,
#globalStatus {
    color: var(--purple-light);
}

#usdtBalance,
#usdtAllowance,
#investorWithdrawAmount,
#poolWithdrawAmount {
    color: var(--cyan);
    font-weight: 600;
}

/* =========================================
   Referral Section
   ========================================= */

#referralSection p {
    padding: 11px 14px;
    margin-bottom: 8px;

    background: rgba(168, 85, 247, 0.045);

    border-left: 2px solid rgba(168, 85, 247, 0.6);

    border-radius: 8px;
}

/* =========================================
   History
   ========================================= */

#historyList {
    margin-top: 20px;
}

#historyList > * {
    padding: 15px;
    margin-bottom: 10px;

    background: rgba(168, 85, 247, 0.06);

    border: 1px solid rgba(168, 85, 247, 0.12);

    border-radius: 12px;
}

/* =========================================
   Footer
   ========================================= */

#footer {
    width: min(1400px, 92%);

    margin: 0 auto 40px;
    padding: 20px;

    text-align: center;

    background: rgba(25, 14, 42, 0.5);

    border: 1px solid rgba(168, 85, 247, 0.12);

    border-radius: 16px;

    backdrop-filter: blur(10px);
}

/* =========================================
   Scrollbar
   ========================================= */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #080510;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        var(--purple-dark),
        var(--purple)
    );

    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--purple-light);
}

/* =========================================
   Selection
   ========================================= */

::selection {
    color: white;
    background: rgba(168, 85, 247, 0.5);
}

/* =========================================
   Responsive
   ========================================= */

@media (max-width: 1000px) {

    #dashboard {
        grid-template-columns: 1fr;
    }

    #userSection {
        grid-column: auto;
    }

    #userInfo {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 700px) {

    #header {
        flex-wrap: wrap;
        padding: 16px 5%;
    }

    #appTitle {
        width: 100%;
        margin-right: 0;
    }

    #networkName,
    #walletAddress {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #dashboard {
        width: 94%;
        margin: 30px auto;
        gap: 16px;
    }

    #dashboard section {
        padding: 20px;
        border-radius: 18px;
    }

    #userInfo {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 450px) {

    #header {
        align-items: stretch;
    }

    #connectWalletButton {
        width: 100%;
    }

    #networkName,
    #walletAddress {
        width: 100%;
        text-align: center;
    }

    #dashboard section {
        padding: 17px;
    }

    button {
        width: 100%;
    }
}