/* Premium FinTech design system shared by marketing and account routes. */
:root {
    --pf-bg: #020714;
    --pf-bg-2: #041026;
    --pf-panel: rgba(7, 18, 43, 0.78);
    --pf-panel-strong: rgba(9, 24, 58, 0.92);
    --pf-panel-hover: rgba(13, 35, 82, 0.92);
    --pf-border: rgba(95, 190, 255, 0.28);
    --pf-border-strong: rgba(36, 207, 255, 0.56);
    --pf-cyan: #19c8ff;
    --pf-cyan-soft: #82f2ff;
    --pf-blue: #146dff;
    --pf-gold: #f6c04a;
    --pf-green: #25e2a2;
    --pf-red: #ff5d86;
    --pf-text: #f6fbff;
    --pf-muted: #a9bdd8;
    --pf-shadow: 0 24px 70px rgba(0, 7, 24, 0.48);
    --pf-glow: 0 0 28px rgba(25, 200, 255, 0.28);
    --pf-radius: 18px;
    --pf-radius-sm: 10px;
    --pf-gradient: linear-gradient(135deg, #82f2ff 0%, #19c8ff 42%, #146dff 100%);
    --pf-gold-gradient: linear-gradient(135deg, #ffe27a 0%, #f6b739 45%, #9d7108 100%);
    --bg-primary: var(--pf-bg);
    --bg-secondary: rgba(4, 16, 38, 0.94);
    --bg-card: var(--pf-panel);
    --bg-card-hover: var(--pf-panel-hover);
    --accent-copper: var(--pf-cyan);
    --accent-copper-light: var(--pf-cyan-soft);
    --accent-gradient: var(--pf-gradient);
    --accent-gradient-hover: linear-gradient(135deg, #b4f8ff 0%, #41d6ff 42%, #2d7cff 100%);
    --text-primary: var(--pf-text);
    --text-secondary: #d9e7fb;
    --text-muted: var(--pf-muted);
    --gain: var(--pf-green);
    --loss: var(--pf-red);
    --border: var(--pf-border);
    --shadow: rgba(0, 7, 24, 0.46);
    color-scheme: dark;
}

html {
    background: var(--pf-bg);
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 15% 8%, rgba(25, 200, 255, 0.12), transparent 28rem),
        radial-gradient(circle at 86% 18%, rgba(246, 192, 74, 0.08), transparent 26rem),
        linear-gradient(180deg, #020714 0%, #030b1d 52%, #01040f 100%) !important;
    color: var(--pf-text);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(25, 200, 255, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(25, 200, 255, 0.045) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent 78%);
}

::selection {
    background: rgba(25, 200, 255, 0.35);
    color: #fff;
}

a,
button,
.nav-item,
.quick-action-card,
.card,
.dashboard-panel,
.metric-tile,
.balance-card,
.market-stat,
.settings-tab,
.apex-redesign__package-card,
.apex-packages__tier-card,
.apex-about__content-grid article {
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

h1,
h2,
h3,
.card-title,
.main-h,
.logo-text,
.metric-value,
.market-stat-value,
.balance-value {
    letter-spacing: 0;
}

.main-content {
    background:
        radial-gradient(circle at 100% 0%, rgba(25, 200, 255, 0.1), transparent 24rem),
        linear-gradient(180deg, rgba(2, 7, 20, 0.96), rgba(2, 7, 20, 0.88)) !important;
    padding: clamp(22px, 3vw, 36px) !important;
}

.sidebar {
    background:
        linear-gradient(180deg, rgba(5, 16, 39, 0.96), rgba(2, 7, 20, 0.98)),
        radial-gradient(circle at top, rgba(25, 200, 255, 0.15), transparent 18rem) !important;
    border-right: 1px solid rgba(95, 190, 255, 0.18) !important;
    box-shadow: 22px 0 70px rgba(0, 0, 0, 0.3);
}

.logo {
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(95, 190, 255, 0.14);
}

.logo-icon {
    border: 1px solid rgba(130, 242, 255, 0.28);
    background: rgba(25, 200, 255, 0.1);
    box-shadow: var(--pf-glow);
}

.logo-text,
.nav-label {
    text-transform: uppercase;
}

.nav-label {
    color: rgba(169, 189, 216, 0.72) !important;
    letter-spacing: 0.18em;
}

.nav-item {
    border: 1px solid transparent;
    border-radius: 12px !important;
    color: rgba(246, 251, 255, 0.78) !important;
}

.nav-item:hover,
.nav-item.active {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(25, 200, 255, 0.16), rgba(20, 109, 255, 0.12)) !important;
    border-color: rgba(25, 200, 255, 0.32);
    box-shadow: inset 0 0 24px rgba(25, 200, 255, 0.06);
}

.header {
    align-items: center;
    padding: 0 0 6px;
}

.header h1 {
    font-size: clamp(2rem, 4vw, 3.4rem) !important;
    line-height: 1;
    text-transform: uppercase;
}

.header-subtitle,
.card-description,
.panel-subtitle {
    color: var(--pf-muted) !important;
}

.notification-btn,
.user-menu,
.theme-toggle,
.logout-btn,
.settings-tab,
.form-input,
.form-select,
.wallet-form-field input,
.wallet-form-field textarea,
.wallet-form-field select,
.wallet-amount-input,
input,
select,
textarea {
    border: 1px solid rgba(95, 190, 255, 0.24) !important;
    background: rgba(5, 18, 43, 0.72) !important;
    color: var(--pf-text) !important;
    box-shadow: inset 0 0 22px rgba(25, 200, 255, 0.03);
}

.notification-btn:hover,
.user-menu:hover,
.settings-tab:hover,
.form-input:focus,
.form-select:focus,
.wallet-form-field input:focus,
.wallet-form-field textarea:focus,
.wallet-form-field select:focus,
.wallet-amount-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--pf-border-strong) !important;
    box-shadow: 0 0 0 4px rgba(25, 200, 255, 0.1), var(--pf-glow) !important;
    outline: 0;
}

.user-avatar,
.notification-badge,
.btn-icon,
.btn-arrow,
.btn-gradient,
.wallet-action-submit,
.form-button,
.primary-button,
.action-button.primary,
.quick-btn.active,
.apex-redesign__primary-btn,
.apex-packages__login,
.apex-about__login {
    background: var(--pf-gradient) !important;
    color: #fff !important;
    box-shadow: 0 18px 38px rgba(25, 200, 255, 0.28) !important;
}

.btn-gradient:hover,
.wallet-action-submit:hover,
.form-button:hover,
.primary-button:hover,
.action-button:hover,
.apex-redesign__primary-btn:hover,
.apex-packages__login:hover,
.apex-about__login:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 48px rgba(25, 200, 255, 0.36) !important;
}

.card,
.dashboard-panel,
.quick-action-card,
.dashboard-meta-item,
.referral-card,
.balance-card,
.wallet-package-option,
.wallet-projection-card,
.wallet-withdraw-card,
.wallet-withdraw-history,
.market-stat,
.market-table,
.settings-content .card,
.admin-card,
.apex-redesign__feature-card,
.apex-redesign__package-card,
.apex-packages__tier-card,
.apex-packages__calculator,
.apex-about__content-grid article,
.apex-about__cta {
    background:
        linear-gradient(145deg, rgba(9, 24, 58, 0.84), rgba(4, 12, 30, 0.78)) !important;
    border: 1px solid var(--pf-border) !important;
    border-radius: var(--pf-radius) !important;
    box-shadow: var(--pf-shadow), inset 0 0 42px rgba(25, 200, 255, 0.045) !important;
    backdrop-filter: blur(18px);
}

.card:hover,
.dashboard-panel:hover,
.quick-action-card:hover,
.balance-card:hover,
.wallet-package-option:hover,
.market-stat:hover,
.apex-redesign__package-card:hover,
.apex-packages__tier-card:hover,
.apex-about__content-grid article:hover {
    transform: translateY(-3px);
    border-color: var(--pf-border-strong) !important;
    box-shadow: var(--pf-shadow), 0 0 30px rgba(25, 200, 255, 0.16) !important;
}

.metric-tile,
.balance-card.primary {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(15, 44, 91, 0.96), rgba(5, 18, 43, 0.92)) !important;
    border: 1px solid rgba(25, 200, 255, 0.34);
    border-radius: var(--pf-radius) !important;
    box-shadow: var(--pf-shadow), inset 0 0 36px rgba(25, 200, 255, 0.08) !important;
}

.metric-tile::after,
.balance-card.primary::after {
    content: "";
    position: absolute;
    inset: auto -20% -45% 38%;
    height: 120px;
    background: radial-gradient(circle, rgba(25, 200, 255, 0.35), transparent 68%);
    pointer-events: none;
}

.metric-tile.amber,
.metric-tile.slate {
    border-color: rgba(246, 192, 74, 0.3);
}

.metric-label,
.balance-label,
.market-stat-label,
.form-label,
.wallet-form-field span,
.dashboard-meta-label,
.stat-label {
    color: var(--pf-muted) !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.metric-icon,
.quick-action-icon,
.balance-icon,
.stat-icon,
.wallet-projection-card .stat-icon {
    background: rgba(25, 200, 255, 0.1) !important;
    border: 1px solid rgba(25, 200, 255, 0.28);
    color: var(--pf-cyan-soft) !important;
    box-shadow: inset 0 0 18px rgba(25, 200, 255, 0.08);
}

.quick-actions-grid,
.metrics-grid,
.balance-cards,
.market-stats,
.wallet-projection-grid {
    gap: clamp(14px, 2vw, 22px) !important;
}

.market-table,
table {
    border-collapse: separate !important;
    border-spacing: 0;
    overflow: hidden;
}

.market-table th,
table th {
    background: rgba(25, 200, 255, 0.08) !important;
    color: #dff7ff !important;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.market-table td,
table td {
    border-color: rgba(95, 190, 255, 0.12) !important;
}

.market-table tr:hover td,
table tr:hover td {
    background: rgba(25, 200, 255, 0.045) !important;
}

.positive,
.gain,
.market-stat-change.positive {
    color: var(--pf-green) !important;
}

.negative,
.loss,
.market-stat-change.negative {
    color: var(--pf-red) !important;
}

.settings-tabs {
    padding: 8px;
    border: 1px solid rgba(95, 190, 255, 0.18);
    border-radius: 16px;
    background: rgba(5, 18, 43, 0.56);
}

.settings-tab.active {
    background: var(--pf-gradient) !important;
    color: #fff !important;
    box-shadow: 0 14px 28px rgba(25, 200, 255, 0.24);
}

.apex-about__team-visual {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 52%, rgba(25, 200, 255, 0.26), transparent 40%),
        linear-gradient(145deg, rgba(6, 18, 43, 0.96), rgba(2, 7, 20, 0.92)) !important;
}

.apex-about__team-visual img {
    width: min(72%, 260px) !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 32px rgba(25, 200, 255, 0.58));
}

.apex-about__mission-panel,
.apex-about__technology {
    background:
        linear-gradient(135deg, rgba(242, 248, 255, 0.96), rgba(223, 239, 255, 0.92)) !important;
    box-shadow: var(--pf-shadow), 0 0 34px rgba(25, 200, 255, 0.12);
}

.apex-about__mission-panel h2,
.apex-about__technology h2 {
    color: #07142d !important;
}

.apex-about__mission-panel h2,
.apex-about__technology-copy > p:first-child,
.apex-about__technology h2 span {
    color: #125cff !important;
}

.apex-about__mission-panel p,
.apex-about__technology p {
    color: #182a4f !important;
}

.apex-about__tech-points strong {
    color: #07142d !important;
}

.apex-about__tech-points span {
    color: #384a6b !important;
}

.apex-redesign__hero,
.apex-packages__hero,
.apex-about__hero {
    background-blend-mode: normal;
}

@media (max-width: 900px) {
    .main-content {
        padding: 84px 18px 24px !important;
    }

    .dashboard {
        grid-template-columns: 1fr !important;
    }

    .metrics-grid,
    .balance-cards,
    .market-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .metrics-grid,
    .balance-cards,
    .market-stats,
    .quick-actions-grid,
    .wallet-projection-grid {
        grid-template-columns: 1fr !important;
    }

    .header {
        align-items: stretch;
    }

    .header-right,
    .user-menu {
        width: 100%;
    }
}