/* =========================================
   RESET
========================================= */

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

:root {

    --primary: #0878f9;
    --primary-dark: #005dcc;

    --navy: #062a61;
    --navy-2: #0b3470;

    --background: #f4f7fb;

    --card: #ffffff;

    --text: #172033;
    --muted: #6d7788;
    --border: #e3eaf3;

    --green: #18b84b;
    --red: #ef4444;

    --shadow:
        0 4px 20px rgba(25, 55, 95, 0.06);

    --radius: 18px;
}

html {
    scroll-behavior: smooth;
}

body {

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background: var(--background);

    color: var(--text);

    min-height: 100vh;

    -webkit-font-smoothing: antialiased;

    padding-bottom: 90px;
}

button,
select {

    font: inherit;

    border: none;

    outline: none;

}

button {

    cursor: pointer;
}


/* =========================================
   APP
========================================= */

.app {

    width: 100%;

    max-width: 520px;

    margin: 0 auto;

    min-height: 100vh;

    background: var(--background);

}


/* =========================================
   HEADER
========================================= */

.app-header {

    background:
        linear-gradient(
            145deg,
            #061f49,
            #0a3471
        );

    color: white;

    border-radius:
        0 0 24px 24px;

    padding:
        28px 18px 24px;

    box-shadow:
        0 5px 20px rgba(0, 35, 90, 0.18);

}

.header-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

}

.brand {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 0;

}

.brand-logo {

    width: 58px;

    height: 58px;

    min-width: 58px;

    border-radius: 16px;

    background: white;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--primary);

    font-weight: 900;

    font-size: 16px;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.12);

}

.brand-text {

    min-width: 0;

}

.console-label {

    font-size: 10px;

    letter-spacing: 1.5px;

    font-weight: 700;

    color: #6fb4ff;

    margin-bottom: 4px;

}

.brand-text h1 {

    font-size: 22px;

    line-height: 1.15;

    font-weight: 750;

    white-space: nowrap;

}

.brand-text p {

    font-size: 12px;

    color: #bdcce2;

    margin-top: 5px;

}

.header-actions {

    display: flex;

    align-items: center;

    gap: 8px;

}

.icon-button {

    width: 42px;

    height: 42px;

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

    border-radius: 12px;

    position: relative;

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

}

.icon-button svg {

    width: 22px;

    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.notification-dot {

    position: absolute;

    top: 7px;

    right: 7px;

    width: 7px;

    height: 7px;

    background: #ff5757;

    border-radius: 50%;

    border: 1px solid white;

}


/* =========================================
   MAIN
========================================= */

.main-content {

    padding: 14px;

}


/* =========================================
   NETWORK STATUS
========================================= */

.network-status {

    background: white;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

    border-radius: 16px;

    min-height: 58px;

    padding: 10px 14px;

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 12px;

}

.network-left {

    display: flex;

    align-items: center;

    gap: 10px;

    flex: 1;

}

.network-left strong {

    font-size: 14px;

}

.network-indicator {

    width: 30px;

    height: 30px;

    background: #e9fff0;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

}

.network-indicator span {

    width: 11px;

    height: 11px;

    background: #16b84e;

    border-radius: 50%;

    box-shadow: 0 0 0 3px #b9f4cc;

}

.live-badge {

    background: #0ca83f;

    color: white;

    font-weight: 700;

    font-size: 11px;

    padding: 5px 11px;

    border-radius: 30px;

}

.arrow-icon {

    width: 19px;

    height: 19px;

    fill: none;

    stroke: #8792a5;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =========================================
   QUICK NAVIGATION
========================================= */

.quick-navigation {

    display: flex;

    background: white;

    border: 1px solid var(--border);

    box-shadow: var(--shadow);

    border-radius: 17px;

    overflow-x: auto;

    scrollbar-width: none;

    margin-bottom: 12px;

}

.quick-navigation::-webkit-scrollbar {
    display: none;
}

.quick-nav-item {

    position: relative;

    flex: 1;

    min-width: 82px;

    padding: 12px 8px 10px;

    background: transparent;

    color: #71809a;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

}

.quick-nav-item:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;

    top: 17px;

    bottom: 17px;

    width: 1px;

    background: #edf1f6;

}

.quick-nav-item svg {

    width: 20px;

    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.quick-nav-item span {

    font-size: 10px;

    white-space: nowrap;

}

.quick-nav-item.active {

    color: var(--primary);

}

.quick-nav-item.active::before {

    content: "";

    position: absolute;

    bottom: 0;

    left: 14px;

    right: 14px;

    height: 3px;

    border-radius: 3px 3px 0 0;

    background: var(--primary);

}







/* =========================================
   DASHBOARD CARD
========================================= */

.dashboard-card {

    background: var(--card);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 15px;

    margin-bottom: 12px;

}

.section-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 14px;

}

.heading-title {

    display: flex;

    align-items: center;

    gap: 9px;

}

.heading-title h2 {

    font-size: 19px;

    font-weight: 750;

}

.heading-title p {

    color: #8490a2;

    font-size: 10px;

    margin-top: 2px;

}

.heading-icon {

    width: 32px;

    height: 32px;

    min-width: 32px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

}

.heading-icon.blue {

    background: #e8f2ff;

    color: var(--primary);

}

.heading-icon svg {

    width: 18px;

    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.small-selector {

    background: #f4f7fc;

    border: 1px solid #e1e9f5;

    color: #5e6e87;

    border-radius: 10px;

    padding: 8px 10px;

    font-size: 10px;

}


/* =========================================
   METRICS
========================================= */

.metrics-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 9px;

}

.metric-card {

    border: 1px solid #e2eaf4;

    border-radius: 13px;

    padding: 11px;

    min-height: 120px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfdff
        );

}

.metric-icon {

    width: 31px;

    height: 31px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 7px;

}

.metric-icon svg {

    width: 17px;

    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.metric-icon.green {

    color: #12a53f;

    background: #e1f8e8;

}

.metric-icon.blue {

    color: #086ff0;

    background: #e1efff;

}

.metric-icon.purple {

    color: #6c45dc;

    background: #eee7ff;

}

.metric-icon.orange {

    color: #e68b14;

    background: #fff0dc;

}

.metric-icon.cyan {

    color: #009caa;

    background: #def8fa;

}

.metric-icon.red {

    color: #e33434;

    background: #ffe4e4;

}

.metric-card span {

    color: #63728a;

    font-size: 10px;

    line-height: 1.35;

}

.metric-card strong {

    color: #101a31;

    font-size: 16px;

    margin-top: 4px;

}


/* =========================================
   BALANCE
========================================= */

.balance-panel {

    border: 1px solid #e2eaf4;

    border-radius: 13px;

    margin-top: 10px;

    padding: 12px;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

}

.balance-item {

    min-width: 0;

}

.balance-label {

    font-size: 10px;

    color: #7a879a;

    margin-bottom: 5px;

}

.balance-item strong {

    display: block;

    font-size: 15px;

    color: #152039;

    white-space: nowrap;

}

.withdraw-button {

    background: var(--primary);

    color: white;

    font-size: 11px;

    font-weight: 700;

    padding: 9px 13px;

    border-radius: 9px;

    margin-top: 9px;

    box-shadow:
        0 4px 10px rgba(8, 120, 249, 0.2);

}

.withdraw-button:active {

    transform: scale(0.97);

}

.total-withdraw {

    grid-column: 1 / -1;

    border-top: 1px solid #e9eef5;

    padding-top: 11px;

    position: relative;

}

.total-withdraw strong {

    font-size: 16px;

}

.total-withdraw svg {

    position: absolute;

    right: 0;

    top: 18px;

    width: 18px;

    height: 18px;

    fill: none;

    stroke: #7d8999;

    stroke-width: 2;

}


/* =========================================
   TIME RANGE
========================================= */

.time-card {

    padding-bottom: 13px;

}

.select-wrapper {

    position: relative;

}

.select-wrapper select {

    width: 100%;

    appearance: none;

    background: white;

    border: 1px solid #dce5ef;

    color: #536177;

    border-radius: 11px;

    height: 47px;

    padding: 0 42px 0 13px;

    font-size: 12px;

}

.select-wrapper svg {

    position: absolute;

    right: 14px;

    top: 50%;

    transform: translateY(-50%);

    width: 17px;

    height: 17px;

    fill: none;

    stroke: #748198;

    stroke-width: 2;

    pointer-events: none;

}


/* =========================================
   MUTED RESULTS
========================================= */

.muted-results {

    padding: 15px;

}

.range-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 17px 12px;

}

.range-grid div {

    min-width: 0;

}

.range-grid span {

    display: block;

    color: #8490a1;

    font-size: 9px;

    margin-bottom: 6px;

    line-height: 1.3;

}

.range-grid strong {

    font-size: 15px;

    color: #a5afbd;

}


/* =========================================
   ALL TIME
========================================= */

.all-time-title {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 16px;

}

.all-time-title h2 {

    font-size: 15px;

    line-height: 1.3;

}

.all-time-title h2 span {

    font-weight: 600;

}

.all-time-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 17px 12px;

}

.all-time-grid span {

    display: block;

    color: #768398;

    font-size: 9px;

    margin-bottom: 5px;

    line-height: 1.3;

}

.all-time-grid strong {

    font-size: 15px;

    color: #142039;

}


/* =========================================
   BOTTOM NAV
========================================= */

.bottom-navigation {

    position: fixed;

    z-index: 50;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    max-width: 520px;

    height: 73px;

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

    backdrop-filter:
        blur(15px);

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

    border-top:
        1px solid #e1e7ef;

    display: flex;

    padding:
        7px 4px
        env(safe-area-inset-bottom);

}

.bottom-nav-item {

    flex: 1;

    background: transparent;

    color: #738198;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

    position: relative;

}

.bottom-nav-item svg {

    width: 20px;

    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}

.bottom-nav-item span {

    font-size: 9px;

    white-space: nowrap;

}

.bottom-nav-item.active {

    color: var(--primary);

}

.bottom-nav-item.active::before {

    content: "";

    position: absolute;

    top: -7px;

    width: 35px;

    height: 3px;

    border-radius: 0 0 4px 4px;

    background: var(--primary);

}


/* =========================================
   TOAST
========================================= */

.toast {

    position: fixed;

    z-index: 100;

    left: 50%;

    bottom: 90px;

    transform:
        translate(-50%, 20px);

    width: calc(100% - 32px);

    max-width: 450px;

    background: #172033;

    color: white;

    padding: 12px 14px;

    border-radius: 13px;

    display: flex;

    align-items: center;

    gap: 10px;

    opacity: 0;

    pointer-events: none;

    transition:
        all 0.25s ease;

    box-shadow:
        0 10px 35px rgba(0,0,0,0.2);

}

.toast.show {

    opacity: 1;

    transform:
        translate(-50%, 0);

}

.toast-icon {

    width: 28px;

    height: 28px;

    background: #18b84b;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

}

.toast strong {

    display: block;

    font-size: 12px;

}

.toast span {

    display: block;

    font-size: 10px;

    color: #bfc8d5;

    margin-top: 2px;

}


/* =========================================
   SIDE MENU
========================================= */

.menu-overlay {

    position: fixed;

    z-index: 80;

    inset: 0;

    background: rgba(0, 10, 30, 0.45);

    opacity: 0;

    visibility: hidden;

    transition: 0.25s;

}

.menu-overlay.show {

    opacity: 1;

    visibility: visible;

}

.side-menu {

    position: fixed;

    z-index: 90;

    top: 0;

    right: 0;

    bottom: 0;

    width: min(330px, 88vw);

    background: white;

    transform: translateX(100%);

    transition:
        transform 0.3s ease;

    box-shadow:
        -10px 0 40px rgba(0,0,0,0.15);

}

.side-menu.show {

    transform: translateX(0);

}

.side-menu-header {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 25px 18px;

    background:
        linear-gradient(
            145deg,
            #061f49,
            #0a3471
        );

    color: white;

}

.side-menu-header .brand-logo {

    width: 45px;

    height: 45px;

    min-width: 45px;

}

.side-menu-header strong {

    display: block;

    font-size: 14px;

}

.side-menu-header small {

    display: block;

    color: #b7c8e2;

    margin-top: 3px;

    font-size: 10px;

}

.side-menu-header button {

    margin-left: auto;

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

    color: white;

    width: 35px;

    height: 35px;

    border-radius: 10px;

    font-size: 25px;

}

.side-menu-items {

    padding: 15px;

}

.side-menu-items button {

    display: block;

    width: 100%;

    text-align: left;

    padding: 14px;

    background: transparent;

    color: #354259;

    border-bottom: 1px solid #edf0f4;

    font-size: 13px;

}

.side-menu-items button:hover {

    background: #f5f8fc;

}

.side-menu-items .logout-item {

    color: #e53935;

}


/* =========================================
   TABLET / DESKTOP
========================================= */

@media (min-width: 700px) {

    body {

        padding-bottom: 0;

    }

    .app {

        max-width: 900px;

    }

    .main-content {

        padding: 20px;

    }

    .metrics-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }

    .range-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }

    .all-time-grid {

        grid-template-columns:
            repeat(3, 1fr);

    }

    .bottom-navigation {

        max-width: 900px;

    }

}