/* ===== RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.7;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background 0.3s ease;
    overflow-x: hidden;
}

a {
    color: #ff9e4d;
    text-decoration: none;
}

    a:hover {
        color: #ff7a7a;
        text-decoration: underline;
    }

/* ===== THEME VARIABLES ===== */
:root {
    --bg: #0f0f15;
    --text: #eaeaff;
    --card: #1a1a25;
    --border: #2d2d40;
    --accent: linear-gradient(90deg, #ff4d4d, #ff9e4d);
    --secondary: linear-gradient(90deg, #4dff91, #6ee7b7);
    --danger: linear-gradient(90deg, #dc2626, #f87171);
    --muted: #a0a0c0;
    --hover: rgba(255, 255, 255, 0.05);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --gradient-bg: radial-gradient(circle at top, #0f0f15, #000);
    --particle-color: rgba(255, 77, 77, 0.2);
}

body.dark-mode {
    --bg: #0f0f15;
    --text: #eaeaff;
    --card: #1a1a25;
    --border: #2d2d40;
    --muted: #a0a0c0;
}

body.light-mode {
    --bg: #ffffff;
    --text: #1a1a25;
    --card: #f8f8f8;
    --border: #e0e0e0;
    --muted: #666666;
}

/* ===== TYPOGRAPHY ===== */
.realtime-data em {
    font-style: italic;
    font-size: 0.85em;
    color: var(--muted);
    opacity: 0.8;
}

h1, h2, h3, h4 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

p, label, span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text);
}

/* ===== HEADER ===== */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background 0.3s ease;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .logo-container img {
        width: 22%;
        height: auto;
    }

.logo-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 24px;
    background: linear-gradient(90deg, #ff4d4d, #ff9e4d);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.nav {
    display: flex;
    gap: 24px;
}

    .nav a {
        color: var(--muted);
        font-weight: 600;
        transition: color 0.2s;
        text-decoration: none;
    }

        .nav a:hover,
        .nav a.active {
            color: #ff9e4d;
        }

.header-actions {
    display: flex;
    gap: 10px;
}

.btn-theme {
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-theme:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: #ff9e4d;
        color: #ff9e4d;
    }


.chain-switcher {
    position: relative;
    min-width: 230px;
}

.chain-selector-native {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.chain-switcher-trigger {
    position: relative;
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 158, 77, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 124, 69, 0.16), rgba(255, 138, 74, 0.05) 42%, rgba(45, 69, 120, 0.32) 100%),
        rgba(14, 17, 34, 0.92);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 12px 32px rgba(0,0,0,0.22),
        0 0 0 1px rgba(255,255,255,0.02);
    color: var(--text);
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    overflow: hidden;
}

.chain-switcher-trigger:hover,
.chain-switcher.open .chain-switcher-trigger {
    transform: translateY(-1px);
    border-color: rgba(255, 170, 80, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 16px 34px rgba(0,0,0,0.26),
        0 0 0 1px rgba(255, 158, 77, 0.10),
        0 0 24px rgba(255, 110, 70, 0.10);
}

.chain-switcher-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 50%, rgba(255, 150, 92, 0.28), transparent 34%),
                linear-gradient(90deg, rgba(255,255,255,0.05), transparent 28%);
    pointer-events: none;
}

.chain-switcher-meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.chain-switcher-label {
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.58);
    margin-bottom: 5px;
}

.chain-switcher-value {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff3e8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 165px;
}

.chain-switcher-caret {
    position: relative;
    z-index: 1;
    color: #ffb066;
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}

.chain-switcher.open .chain-switcher-caret {
    transform: rotate(180deg);
}

.chain-switcher-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(255, 158, 77, 0.18);
    background: linear-gradient(180deg, rgba(11, 14, 30, 0.98), rgba(16, 20, 38, 0.98));
    box-shadow: 0 24px 48px rgba(0,0,0,0.34), 0 0 0 1px rgba(255,255,255,0.02);
    display: none;
    z-index: 1200;
    backdrop-filter: blur(16px);
}

.chain-switcher.open .chain-switcher-menu {
    display: grid;
    gap: 8px;
}

.chain-option {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.05);
    background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    color: var(--text);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.chain-option:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 170, 80, 0.30);
    background: linear-gradient(135deg, rgba(255, 140, 60, 0.10), rgba(255,255,255,0.03));
}


.chain-option[aria-disabled="true"] {
    cursor: not-allowed;
}

.chain-option[aria-disabled="true"]:hover {
    transform: none;
}

.chain-option.is-selected {
    border-color: rgba(255, 170, 80, 0.46);
    background: linear-gradient(135deg, rgba(255, 133, 64, 0.16), rgba(73, 116, 212, 0.12));
    box-shadow: inset 0 0 0 1px rgba(255, 170, 80, 0.06);
}

.chain-option-main {
    min-width: 0;
}

.chain-option-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #fff4eb;
    margin-bottom: 4px;
}

.chain-option-subtitle {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,0.60);
}

.chain-option-badge {
    flex-shrink: 0;
    padding: 6px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffca9a;
    background: rgba(255, 149, 77, 0.10);
    border: 1px solid rgba(255, 170, 80, 0.18);
}

body.light-mode .chain-switcher-trigger {
    background: linear-gradient(135deg, rgba(255, 138, 74, 0.10), rgba(255,255,255,0.86) 46%, rgba(240, 244, 255, 0.96) 100%);
    border-color: rgba(255, 140, 60, 0.18);
    box-shadow: 0 12px 28px rgba(25, 30, 56, 0.08), inset 0 1px 0 rgba(255,255,255,0.5);
}

body.light-mode .chain-switcher-label {
    color: rgba(30,35,58,0.56);
}

body.light-mode .chain-switcher-value,
body.light-mode .chain-option-title {
    color: #1f2442;
}

body.light-mode .chain-switcher-menu {
    background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(244,247,255,0.98));
    border-color: rgba(255, 140, 60, 0.15);
    box-shadow: 0 24px 44px rgba(35, 44, 80, 0.10);
}

body.light-mode .chain-option {
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(246,248,255,0.96));
    border-color: rgba(29,34,61,0.06);
}

body.light-mode .chain-option-subtitle {
    color: rgba(31,36,66,0.60);
}

@media (max-width: 768px) {
    .chain-switcher {
        min-width: 100%;
    }

    .chain-switcher-value {
        max-width: none;
    }
}

.btn-connect {
    padding: 8px 16px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

    .btn-connect:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: #ff9e4d;
        color: #ff9e4d;
    }

/* ===== HERO SECTION ===== */
.hero {
    background: var(--gradient-bg);
    padding: 60px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQPSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjZmJiZjI0Ij48cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6Ii8+PC9zdmc=');
        opacity: 0.1;
        z-index: -1;
    }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.hero-content {
    max-width: 600px;
    margin: 0 auto;
    animation: fadeInUp 1s ease-out;
}

    .hero-content h1 {
        font-size: 3rem;
        margin-bottom: 16px;
        background: linear-gradient(90deg, #ff4d4d, #ff9e4d);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .hero-content .subtitle {
        font-size: 1.2rem;
        margin-bottom: 24px;
        color: var(--muted);
    }

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.btn {
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    font-size: 16px;
    min-width: 120px;
}

    .btn.primary {
        background: var(--accent);
        color: white;
    }

        .btn.primary:hover {
            background: linear-gradient(90deg, #ff7a7a, #ffb366);
            transform: translateY(-2px);
        }

    .btn.secondary {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text);
    }

        .btn.secondary:hover {
            background: var(--hover);
            border-color: #ff9e4d;
            color: #ff9e4d;
        }

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 32px;
    flex-wrap: wrap;
}

    .hero-stats div {
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
        font-size: 14px;
        color: var(--muted);
    }

.hero-image {
    margin-top: 40px;
    animation: bounce 2s infinite;
}

    .hero-image img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        box-shadow: 0 0 20px rgba(255, 77, 77, 0.5);
    }

/* ===== FEATURES SECTION ===== */
.features {
    padding: 60px 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

    .features h2 {
        text-align: center;
        margin-bottom: 40px;
    }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.card {
    background: var(--bg);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: transform 0.3s ease;
}

    .card:hover {
        transform: translateY(-5px);
    }

.feature-card .icon {
    font-size: 2.5rem;
    margin-bottom: 16px;
    color: #ff9e4d;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

.feature-card p {
    color: var(--muted);
    font-size: 14px;
}

/* ===== TOKENOMICS SECTION ===== */
.tokenomics {
    padding: 60px 0;
    background: var(--bg);
}

    .tokenomics h2 {
        text-align: center;
        margin-bottom: 40px;
    }

.tokenomics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.tokenomics-card {
    background: var(--card);
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

    .tokenomics-card h3 {
        font-size: 1.25rem;
        margin-bottom: 12px;
        color: #ff9e4d;
    }

    .tokenomics-card p {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text);
    }

.tokenomics-chart {
    text-align: center;
    margin: 10px 0;
}

    .tokenomics-chart canvas {
        max-width: 60%;
        height: 200px;
        border-radius: 20px;
        box-shadow: var(--shadow);
    }

.realtime-data {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.stat {
    background: var(--card);
    border-radius: 12px;
    padding: 12px 20px;
    text-align: center;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

    .stat span {
        display: block;
        font-size: 14px;
        color: var(--muted);
        margin-bottom: 4px;
    }

    .stat strong {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text);
    }

/* ===== ROADMAP SECTION ===== */
.roadmap {
    padding: 60px 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

    .roadmap h2 {
        text-align: center;
        margin-bottom: 40px;
    }

.timeline {
    position: relative;
    padding: 20px 0;
}

.milestone {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px;
    position: relative;
}

    .milestone:last-child {
        margin-bottom: 0;
    }

.date {
    flex-shrink: 0;
    width: 100px;
    text-align: center;
    padding: 12px;
    background: var(--accent);
    color: white;
    border-radius: 12px;
    font-weight: 700;
    margin-right: 24px;
}

.content {
    flex-grow: 1;
    background: var(--bg);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

    .content h3 {
        margin-top: 0;
        color: #ff9e4d;
    }

/* ===== TEAM SECTION ===== */
.team {
    padding: 60px 0;
    background: var(--bg);
}

    .team h2 {
        text-align: center;
        margin-bottom: 40px;
    }

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.team-member {
    text-align: center;
    background: var(--card);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: transform 0.3s ease;
}

    .team-member:hover {
        transform: translateY(-5px);
    }

    .team-member img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-bottom: 16px;
        object-fit: cover;
        border: 2px solid #ff9e4d;
    }

    .team-member h3 {
        font-size: 1.25rem;
        margin-bottom: 8px;
        color: #ff9e4d;
    }

    .team-member p {
        color: var(--muted);
        font-size: 14px;
    }

.social-links {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

    .social-links a {
        color: var(--muted);
        transition: color 0.2s;
    }

        .social-links a:hover {
            color: #ff9e4d;
        }

/* ===== AI TRADING SECTION ===== */
.ai-trading {
    padding: 60px 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

    .ai-trading h2 {
        text-align: center;
        margin-bottom: 40px;
    }

.ai-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.ai-card {
    background: var(--bg);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: transform 0.3s ease;
}

    .ai-card:hover {
        transform: translateY(-5px);
    }

    .ai-card .icon {
        font-size: 2.5rem;
        margin-bottom: 16px;
        color: #ff9e4d;
    }

    .ai-card h3 {
        font-size: 1.5rem;
        margin-bottom: 12px;
    }

    .ai-card p {
        color: var(--muted);
        font-size: 14px;
    }

/* ===== GAMING SECTION ===== */
.gaming {
    padding: 60px 0;
    background: var(--bg);
}

    .gaming h2 {
        text-align: center;
        margin-bottom: 40px;
    }

.gaming-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.game-card {
    background: var(--card);
    border-radius: 20px;
    padding: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    transition: transform 0.3s ease;
}

    .game-card:hover {
        transform: translateY(-5px);
    }

    .game-card img {
        width: 100%;
        height: 150px;
        border-radius: 12px;
        object-fit: cover;
        margin-bottom: 16px;
        border: 2px solid #ff9e4d;
    }

    .game-card h3 {
        font-size: 1.5rem;
        margin-bottom: 12px;
        color: #ff9e4d;
    }

    .game-card p {
        color: var(--muted);
        font-size: 14px;
    }

/* ===== PARTNERS SECTION ===== */
.partners {
    padding: 60px 0;
    background: var(--card);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

    .partners h2 {
        text-align: center;
        margin-bottom: 40px;
    }

.partner-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}

    .partner-logos img {
        width: 100px;
        height: 100px;
        filter: grayscale(100%);
        transition: filter 0.3s ease, transform 0.3s ease;
    }

        .partner-logos img:hover {
            filter: grayscale(0%);
            transform: scale(1.1);
        }

/* ===== FAQ SECTION ===== */
.faq {
    padding: 60px 0;
    background: var(--bg);
}

    .faq h2 {
        text-align: center;
        margin-bottom: 40px;
    }

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 24px;
    border: 1px solid var(--border);
    border-radius: 20px;
    overflow: hidden;
}

.faq-question {
    padding: 16px 24px;
    background: var(--card);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .faq-question::after {
        content: '+';
        font-size: 1.5rem;
        transition: transform 0.3s ease;
    }

.faq-item.active .faq-question::after {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 16px 24px;
    background: var(--bg);
    display: none;
    color: var(--muted);
}

.faq-item.active .faq-answer {
    display: block;
}

/* ===== MAIN CONTENT ===== */
.main-content {
    flex: 1;
    padding: 32px 0;
    background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQPSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjZmJiZjI0Ij48cGF0aCBkPSJNMTIgMkM2LjQ4IDIgMiA2LjQ4IDIgMTJzNC40OCAxMCAxMCAxMCAxMC00LjQ4IDEwLTEwUzE3LjUyIDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6Ii8+PC9zdmc+');
    background-size: cover;
}

/* ===== CARDS ===== */
.swap-card,
.liquidity-card,
.wrap-card {
    max-width: 500px;
    margin: 0 auto;
}

/* ===== TOKEN INPUT GROUP ===== */
.token-input-group {
    margin-bottom: 20px;
}

    .token-input-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
        color: var(--text);
    }

.input-wrapper {
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
}

    .input-wrapper input {
        flex: 1;
        border: none;
        background: transparent;
        padding: 16px;
        color: var(--text);
        font-size: 18px;
        outline: none;
    }

        .input-wrapper input:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.3);
        }

.token-select {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.2s;
}

    .token-select:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    .token-select img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
    }

.balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 14px;
    color: var(--muted);
}

.max-btn {
    color: #ff9e4d;
    cursor: pointer;
    font-weight: 600;
    transition: color 0.2s;
}

    .max-btn:hover {
        color: #ff7a7a;
    }

/* ===== SWAP ARROW ===== */
.swap-arrow {
    display: flex;
    justify-content: center;
    margin: 16px 0;
    background: var(--card);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    align-items: center;
    cursor: pointer;
    border: 2px solid #2d2d40;
    transition: all 0.2s;
}

    .swap-arrow:hover {
        transform: scale(1.1);
        border-color: #ff9e4d;
    }

/* ===== SLIPPAGE SECTION ===== */
.slippage-section {
    margin: 20px 0;
}

    .slippage-section label {
        display: block;
        margin-bottom: 8px;
        font-weight: 600;
    }

.slippage-buttons {
    display: flex;
    gap: 8px;
}

.slippage-btn {
    background: transparent;
    border: 1px solid #2d2d40;
    color: var(--muted);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

    .slippage-btn:hover {
        background: rgba(255, 77, 77, 0.1);
        border-color: #ff9e4d;
        color: #ff9e4d;
    }

    .slippage-btn.active {
        background: #ff4d4d;
        color: white;
        border-color: #ff4d4d;
    }

/* ===== PREVIEW BOX ===== */
.preview-box {
    margin: 20px 0;
    padding: 16px;
    background: rgba(255, 77, 77, 0.1);
    border-radius: 12px;
    font-size: 14px;
    color: var(--muted);
    border: 1px solid #2d2d40;
}

    .preview-box p {
        margin: 0;
    }

/* ===== ACTION BUTTONS ===== */
.btn-swap,
.btn-add,
.btn-remove,
.btn-submit {
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    font-size: 18px;
}

.btn-swap {
    background: linear-gradient(90deg, #ff4d4d, #ff9e4d);
    color: white;
}

    .btn-swap:hover {
        background: linear-gradient(90deg, #ff7a7a, #ffb366);
        transform: translateY(-2px);
    }

.btn-add {
    background: linear-gradient(90deg, #4dff91, #6ee7b7);
    color: #0f0f15;
}

    .btn-add:hover {
        background: linear-gradient(90deg, #6ee7b7, #86efac);
        transform: translateY(-2px);
    }

.btn-remove {
    background: linear-gradient(90deg, #dc2626, #f87171);
    color: white;
}

    .btn-remove:hover {
        background: linear-gradient(90deg, #f87171, #fca5a5);
        transform: translateY(-2px);
    }

.btn-submit {
    background: linear-gradient(90deg, #ff4d4d, #ff9e4d);
    color: white;
}

    .btn-submit:hover {
        background: linear-gradient(90deg, #ff7a7a, #ffb366);
        transform: translateY(-2px);
    }

/* ===== TABS ===== */
.tabs {
    display: flex;
    margin-bottom: 20px;
    background: #0f0f15;
    border-radius: 16px;
    overflow: hidden;
}

.tab {
    flex: 1;
    padding: 12px 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    color: var(--muted);
}

    .tab:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .tab.active {
        background: #ff4d4d;
        color: white;
    }

/* ===== DIVIDER ===== */
.divider {
    text-align: center;
    margin: 20px 0;
    color: var(--muted);
    font-size: 14px;
    position: relative;
}

    .divider:before,
    .divider:after {
        content: "";
        position: absolute;
        top: 50%;
        width: 40%;
        height: 1px;
        background: #2d2d40;
    }

    .divider:before {
        left: 0;
    }

    .divider:after {
        right: 0;
    }

/* ===== REMOVE LIQUIDITY ===== */
.remove-liquidity {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .remove-liquidity .input-wrapper {
        display: flex;
        gap: 8px;
        align-items: center;
    }

        .remove-liquidity .input-wrapper input {
            flex: 1;
        }

.percentage-selector {
    display: flex;
    gap: 8px;
}

    .percentage-selector button {
        flex: 1;
        padding: 8px;
        border-radius: 8px;
        border: 1px solid #2d2d40;
        background: transparent;
        color: var(--muted);
        cursor: pointer;
        transition: all 0.2s;
    }

        .percentage-selector button:hover {
            background: rgba(255, 77, 77, 0.1);
            border-color: #ff9e4d;
            color: #ff9e4d;
        }

/* ===== TOKEN SELECTOR MODAL ===== */
body.token-selector-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(3, 7, 18, 0.58);
    backdrop-filter: blur(8px);
}

.token-selector-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, rgba(30, 31, 46, 0.98), rgba(18, 19, 30, 0.98));
    border: 1px solid rgba(255, 158, 77, 0.22);
    border-radius: 22px;
    padding: 18px;
    width: min(380px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    max-height: min(620px, calc(100vh - 48px));
    overflow: hidden;
    z-index: 9999;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.04) inset;
}

.selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

    .selector-header span {
        font-weight: 600;
    }

    .selector-header button {
        background: transparent;
        border: none;
        color: var(--muted);
        cursor: pointer;
        font-size: 20px;
    }

.token-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(480px, calc(100vh - 160px));
    overflow-y: auto;
    padding-right: 4px;
}

.token-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

    .token-item:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .token-item img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
    }

/* ===== FOOTER ===== */
.app-footer {
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 16px 24px;
    margin-top: auto;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--muted);
}

.footer-link {
    color: #ff9e4d;
    font-weight: 600;
}

    .footer-link:hover {
        text-decoration: underline;
    }

/* ===== TOAST ===== */
#toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 20px;
    background: var(--card);
    border: 1px solid #2d2d40;
    border-radius: 12px;
    color: var(--text);
    display: none;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===== PARTICLE BACKGROUND ===== */
.particle {
    position: absolute;
    border-radius: 50%;
    background: var(--particle-color);
    pointer-events: none;
    z-index: -1;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .app-header {
        flex-direction: column;
        gap: 16px;
        padding: 16px;
    }

    .nav {
        width: 100%;
        justify-content: space-around;
    }

    .header-actions {
        width: 100%;
        justify-content: center;
    }

    .container {
        padding: 0 16px;
    }

    .hero-content {
        padding: 0 16px;
    }

        .hero-content h1 {
            font-size: 2rem;
        }

    .hero-stats {
        flex-direction: column;
        gap: 12px;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .tokenomics-grid {
        grid-template-columns: 1fr;
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .ai-grid {
        grid-template-columns: 1fr;
    }

    .gaming-grid {
        grid-template-columns: 1fr;
    }

    .partner-logos {
        gap: 20px;
    }

        .partner-logos img {
            width: 80px;
            height: 80px;
        }

    .footer-content {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .card {
        padding: 20px;
        border-radius: 16px;
    }

    .swap-card,
    .liquidity-card,
    .wrap-card {
        max-width: 100%;
    }

    .input-wrapper input {
        padding: 12px;
        font-size: 16px;
    }

    .token-select {
        padding: 0 12px;
    }

    .balance {
        font-size: 12px;
    }

    .btn-swap,
    .btn-add,
    .btn-remove,
    .btn-submit {
        padding: 12px;
        font-size: 16px;
    }

    .token-selector-modal {
        width: 90vw;
    }
}

/* ===== MOBILE MENU FIX ===== */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    font-size: 24px;
    cursor: pointer;
    padding: 4px;
    margin-left: 8px;
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: block;
    }

    .app-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
    }

    .logo-container img {
        height: 28px;
        width: auto;
    }

    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--card);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 16px 0;
        display: none !important;
        z-index: 1000;
    }

        .nav.active {
            display: flex !important;
        }

        .nav a {
            width: 100%;
            text-align: center;
            padding: 8px 0;
            color: var(--muted);
        }

            .nav a:hover,
            .nav a.active {
                color: #ff9e4d;
            }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }
}

/* ===== NETWORK ALERT BANNER ===== */
.network-alert {
    position: sticky;
    top: 0;
    z-index: 2000;
    background: linear-gradient(90deg, #ff4d4d, #ff9e4d);
    color: white;
    padding: 12px 20px;
    font-size: 14px;
    box-shadow: 0 4px 12px rgba(255, 77, 77, 0.3);
    backdrop-filter: blur(4px);
}

.alert-content {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    position: relative;
}

.alert-link {
    background: rgba(0,0,0,0.2);
    color: white;
    padding: 4px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s;
}

    .alert-link:hover {
        background: rgba(0,0,0,0.3);
    }

.alert-close {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: auto;
    padding: 0;
    transition: background 0.2s;
}

    .alert-close:hover {
        background: rgba(0,0,0,0.2);
    }

@media (max-width: 768px) {
    .alert-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .alert-link {
        align-self: flex-end;
    }

    .alert-close {
        align-self: flex-end;
        margin-top: 4px;
    }
}

/* ===== WRAP SECTION IN SWAP ===== */
.wrap-section {
    margin: 24px 0;
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.btn-wrap-toggle {
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(90deg, #ff4d4d, #ff9e4d);
    color: white;
    border: none;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.2s;
}

    .btn-wrap-toggle:hover {
        opacity: 0.92;
    }

.wrap-panel {
    padding: 20px;
    border-top: 1px solid var(--border);
}

.wrap-form .form-group {
    margin-bottom: 16px;
}

.wrap-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text);
}

.input-with-balance {
    display: flex;
    gap: 8px;
}

    .input-with-balance input {
        flex: 1;
        padding: 12px 16px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card);
        color: var(--text);
        font-size: 16px;
    }

.btn-max {
    padding: 12px 16px;
    background: var(--btn-secondary-bg, #2d2d40);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    min-width: 70px;
}

.balance-row {
    margin-top: 6px;
    font-size: 14px;
    color: var(--muted);
}

.wrap-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

    .wrap-actions .btn-action {
        flex: 1;
        padding: 12px;
        border: none;
        border-radius: 12px;
        font-weight: 600;
        font-size: 16px;
        cursor: pointer;
    }

        .wrap-actions .btn-action.primary {
            background: linear-gradient(90deg, #ff4d4d, #ff9e4d);
            color: white;
        }

        .wrap-actions .btn-action.secondary {
            background: var(--btn-secondary-bg, #2d2d40);
            color: var(--text);
        }

        .wrap-actions .btn-action:hover {
            opacity: 0.9;
        }

/* Dark/light mode support */
body.dark-mode .wrap-section {
    --btn-secondary-bg: #2d2d40;
}

body.light-mode .wrap-section {
    --btn-secondary-bg: #f0f0f0;
}


/* ===== WRAP REDIRECT BANNER ===== */
.wrap-redirect-banner {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: linear-gradient(90deg, #ff4d4d, #ff9e4d);
    color: white;
    text-decoration: none;
    border-radius: 16px;
    margin-bottom: 24px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(255, 77, 77, 0.3);
    transition: transform 0.2s, opacity 0.2s;
}

    .wrap-redirect-banner:hover {
        transform: translateY(-2px);
        opacity: 0.95;
    }

    .wrap-redirect-banner svg {
        flex-shrink: 0;
    }

    .wrap-redirect-banner span {
        display: flex;
        flex-direction: column;
    }

    .wrap-redirect-banner strong {
        font-size: 16px;
    }

    .wrap-redirect-banner span:last-child {
        font-size: 14px;
        font-weight: normal;
        opacity: 0.9;
    }

/* ===== CONTACT US SECTION ===== */
.contact-us {
    padding: 30px 0;
    background: var(--bg);
}

    .contact-us h2 {
        text-align: center;
        margin-bottom: 40px;
    }

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    max-width: 900px;
    margin: 0 auto;
}

.contact-form-card,
.contact-info-card {
    background: var(--card);
    border-radius: 20px;
    padding: 28px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

.form-group {
    margin-bottom: 16px;
}

    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 14px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--text);
        font-size: 16px;
        font-family: 'Inter', sans-serif;
        outline: none;
        transition: border-color 0.2s;
    }

        .form-group input:focus,
        .form-group textarea:focus {
            border-color: #ff9e4d;
        }

.contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 24px 0;
}

    .contact-social a {
        display: inline-block;
        padding: 8px 16px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        color: #ff9e4d;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.2s;
    }

        .contact-social a:hover {
            background: rgba(255, 77, 77, 0.15);
            color: white;
        }

.contact-details {
    margin-top: 16px;
    font-size: 14px;
    color: var(--muted);
}

    .contact-details p {
        margin: 8px 0;
    }

/* Responsive */
@media (max-width: 768px) {
    .contact-grid {
        gap: 24px;
    }

    .contact-form-card,
    .contact-info-card {
        padding: 20px;
    }
}


/* ===== FARMING PAGE STYLES ===== */
.farming-hero {
    background: linear-gradient(135deg, #1a1a25 0%, #0f0f15 100%);
    padding: 40px 0;
    margin-bottom: 40px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
}

    .farming-hero .hero-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .farming-hero h1 {
        font-size: 2.5rem;
        margin-bottom: 16px;
        background: linear-gradient(90deg, #ff4d4d, #ff9e4d);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        text-align: center;
    }

    .farming-hero .subtitle {
        text-align: center;
        font-size: 1.1rem;
        color: var(--muted);
        margin-bottom: 32px;
    }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid var(--border);
}

.stat-label {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 8px;
    display: block;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    display: block;
}

.farming-section {
    margin-bottom: 40px;
}

    .farming-section h2 {
        font-size: 2rem;
        margin-bottom: 24px;
        text-align: center;
    }

.pools-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
}

.loading-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--muted);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: #ff4d4d;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.connect-prompt {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    background: var(--card);
    border-radius: 20px;
    border: 1px solid var(--border);
}

    .connect-prompt p {
        margin-bottom: 20px;
        color: var(--muted);
        font-size: 1.1rem;
    }

    .connect-prompt .btn {
        min-width: 180px;
    }

.no-pools {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    background: var(--card);
    border-radius: 20px;
    border: 1px solid var(--border);
    color: var(--muted);
}

.error-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    background: var(--card);
    border-radius: 20px;
    border: 1px solid var(--border);
    color: var(--muted);
}

    .error-message .btn {
        margin-top: 16px;
        min-width: 120px;
    }
/* POOL CARD */
.pool-card {
    background: var(--card);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    cursor: pointer;
}

    .pool-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        border-color: #ff9e4d;
    }

.pool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.pool-name {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.pool-symbol {
    background: linear-gradient(90deg, #ff4d4d, #ff9e4d);
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
}

.pool-name h4 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--text);
}

.pool-badge {
    display: inline-block;
    background: rgba(255, 77, 77, 0.2);
    color: #ff9e4d;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 4px;
}

.pool-arrow {
    color: #ff9e4d;
    font-weight: 700;
    font-size: 1.5rem;
    transition: transform 0.2s;
}

.pool-card:hover .pool-arrow {
    transform: translateX(5px);
}

.pool-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.stat-item {
    text-align: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

    .stat-item .label {
        font-size: 12px;
        color: var(--muted);
        display: block;
        margin-bottom: 4px;
    }

    .stat-item .value {
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        display: block;
    }

    .stat-item .highlight {
        color: #ff9e4d;
    }

.pool-actions {
    display: flex;
    gap: 12px;
}

.btn-small {
    flex: 1;
    padding: 10px 16px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

    .btn-small.primary {
        background: linear-gradient(90deg, #ff4d4d, #ff9e4d);
        color: white;
    }

        .btn-small.primary:hover {
            background: linear-gradient(90deg, #ff7a7a, #ffb366);
            transform: translateY(-2px);
        }

    .btn-small.secondary {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text);
    }

        .btn-small.secondary:hover {
            background: rgba(255, 255, 255, 0.05);
            border-color: #ff9e4d;
            color: #ff9e4d;
        }
/* HOW TO FARM */
.how-to-farm {
    background: var(--card);
    border-radius: 20px;
    padding: 32px;
    border: 1px solid var(--border);
    margin-top: 40px;
}

    .how-to-farm h3 {
        text-align: center;
        margin-bottom: 32px;
        font-size: 1.75rem;
    }

.steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.step-card {
    background: var(--bg);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--border);
    text-align: center;
    transition: transform 0.3s ease;
}

    .step-card:hover {
        transform: translateY(-5px);
    }

.step-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(90deg, #ff4d4d, #ff9e4d);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 auto 16px;
}

.step-content h4 {
    margin: 0 0 8px;
    font-size: 1.25rem;
    color: var(--text);
}

.step-content p {
    color: var(--muted);
    font-size: 14px;
    margin: 0;
}
/* POOL MODAL */
.pool-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
}

.modal-content {
    position: relative;
    background: var(--card);
    border-radius: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    max-width: 500px;
    width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 2001;
}

.modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3 {
        margin: 0;
        font-size: 1.5rem;
    }

.modal-close {
    background: none;
    border: none;
    color: var(--text);
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

    .modal-close:hover {
        background: rgba(255, 255, 255, 0.1);
    }

.modal-body {
    margin: 0;
    padding: 24px;
}

.pool-info {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid var(--border);
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

    .info-row:last-child {
        border-bottom: none;
    }

    .info-row span:first-child {
        color: var(--muted);
        font-size: 14px;
    }

    .info-row .highlight {
        color: #ff9e4d;
        font-weight: 600;
    }

.action-section {
    margin-bottom: 24px;
}

    .action-section h4 {
        margin-bottom: 12px;
        font-size: 1.125rem;
        color: var(--text);
    }

.input-group {
    margin-bottom: 16px;
}

    .input-group input {
        width: 100%;
        padding: 14px 16px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: var(--bg);
        color: var(--text);
        font-size: 16px;
        outline: none;
        margin-bottom: 8px;
    }

        .input-group input:focus {
            border-color: #ff9e4d;
            box-shadow: 0 0 0 2px rgba(255, 77, 77, 0.2);
        }

.balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--muted);
}

    .balance-row .max-btn {
        color: #ff9e4d;
        cursor: pointer;
        font-weight: 600;
    }

.btn-action {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

    .btn-action.primary {
        background: linear-gradient(90deg, #ff4d4d, #ff9e4d);
        color: white;
    }

        .btn-action.primary:hover {
            background: linear-gradient(90deg, #ff7a7a, #ffb366);
            transform: translateY(-2px);
        }

    .btn-action.secondary {
        background: linear-gradient(90deg, #dc2626, #f87171);
        color: white;
    }

        .btn-action.secondary:hover {
            background: linear-gradient(90deg, #f87171, #fca5a5);
            transform: translateY(-2px);
        }

.harvest-section {
    margin-bottom: 16px;
}

.btn-harvest {
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    border: none;
    background: linear-gradient(90deg, #4dff91, #6ee7b7);
    color: #0f0f15;
    font-weight: 700;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-harvest:hover {
        background: linear-gradient(90deg, #6ee7b7, #86efac);
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(77, 255, 145, 0.3);
    }

.emergency-section {
    text-align: center;
}

.btn-emergency {
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #dc2626;
    background: transparent;
    color: #dc2626;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-emergency:hover {
        background: rgba(220, 38, 38, 0.1);
        border-color: #f87171;
        color: #f87171;
    }
/* RESPONSIVE FARMING */
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .pools-container {
        grid-template-columns: 1fr;
    }

    .pool-stats {
        grid-template-columns: 1fr;
    }

    .steps-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: 95vw;
    }

    .farming-hero h1 {
        font-size: 2rem;
    }
}

/* POOL MODAL FIX */
.pool-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
}

    .pool-modal[style*="display: flex"] {
        display: flex !important;
    }

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

.modal-content {
    position: relative;
    background: var(--card);
    border-radius: 24px;
    border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    max-width: 500px;
    width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 2001;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pool Summary Card */
.pool-summary {
    grid-column: 1 / -1;
    background: rgba(255, 77, 77, 0.1);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--border);
    margin-bottom: 20px;
}

    .pool-summary h4 {
        margin: 0 0 12px;
        color: var(--text);
    }

    .pool-summary div {
        text-align: center;
    }

    .pool-summary .label {
        font-size: 12px;
        color: var(--muted);
        margin-bottom: 4px;
        display: block;
    }

    .pool-summary .value {
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text);
        display: block;
    }

        .pool-summary .value.highlight {
            color: #ff9e4d;
        }

/* Placeholder contrast */
input::placeholder { color: var(--muted); opacity: 0.9; }


.btn-disconnect {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-disconnect:hover {
    background: var(--hover);
}

.wrap-balance { margin-top: 8px; }


/* ===== DASHBOARD ===== */
.dashboard-page{
  width: min(1200px, 92%);
  margin: 0 auto;
  padding: 28px 0 60px;
}
.dashboard-hero{
  display:flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  padding: 18px 18px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,158,77,0.16), rgba(255,86,124,0.10));
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  margin-bottom: 18px;
}
.dashboard-hero h1{ font-size: 28px; letter-spacing: -0.02em; }
.muted{ color: var(--muted); }
.small{ font-size: 12px; }

.dashboard-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.dash-card{
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(0,0,0,0.16);
  padding: 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.16);
  backdrop-filter: blur(10px);
}
.light-mode .dash-card{ background: rgba(255,255,255,0.68); }
.dash-card--wide{ grid-column: 1 / -1; }

.dash-card__head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  margin-bottom: 12px;
}
.dash-card h2{ font-size: 16px; }

.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
}
.pill--connected{ background: rgba(46,213,115,0.16); }
.pill--disconnected{ background: rgba(255,71,87,0.12); }

.dash-kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.kv{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}
.kv__k{ font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.kv__v{ font-size: 14px; font-weight: 600; word-break: break-word; }

.dash-card__foot{
  display:flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 12px;
}

.dash-list{ display:flex; flex-direction:column; gap: 10px; }
.dash-row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
}
.dash-row__left{ display:flex; flex-direction:column; gap: 2px; }
.dash-row__sym{ font-weight: 700; }
.dash-row__name{ font-size: 12px; color: var(--muted); }
.dash-row__right{ font-weight: 700; }

.dash-divider{ height:1px; background: var(--border); margin: 12px 0; }
.dash-totals{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.btn-primary{
  background: linear-gradient(90deg, #ff9e4d, #ff567c);
  color: white;
  border: none;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  cursor:pointer;
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-secondary{
  background: rgba(255,255,255,0.10);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.btn-ghost{
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.btn-secondary:hover,.btn-ghost:hover{ transform: translateY(-1px); }

.dash-empty{
  border: 1px dashed var(--border);
  border-radius: 16px;
  padding: 18px;
  text-align:center;
}
.dash-empty__title{ font-weight: 800; margin-bottom: 6px; }
.dash-empty__desc{ color: var(--muted); font-size: 13px; }

.dash-lp-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.lp-mini{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
}
.lp-mini__head{
  display:flex;
  justify-content: space-between;
  align-items:baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.lp-mini__pair{ font-weight: 900; }
.lp-mini__lp{ color: var(--muted); font-size: 12px; }
.lp-mini__line{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.light-mode .lp-mini__line{ border-bottom: 1px solid rgba(0,0,0,0.08); }
.lp-mini__line:last-child{ border-bottom:none; }
.lp-mini__meta{ margin-top: 8px; }
.lp-mini__actions{ display:flex; justify-content:flex-end; margin-top: 10px; }

.dash-farm-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.farm-stat{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
}
.farm-stat__k{ font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.farm-stat__v{ font-size: 18px; font-weight: 900; }

@media (max-width: 900px){
  .dashboard-grid{ grid-template-columns: 1fr; }
  .dash-card--wide{ grid-column: auto; }
  .dash-lp-grid{ grid-template-columns: 1fr; }
  .dash-farm-grid{ grid-template-columns: 1fr; }
  .dash-kv{ grid-template-columns: 1fr; }
  .dashboard-hero{ align-items: flex-start; flex-direction: column; }
}


/* ===== Dashboard Analytics ===== */
.dash-analytics{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:16px;
}
@media (max-width: 980px){
  .dash-analytics{ grid-template-columns: 1fr; }
}

.dash-analytics__title{
  font-weight:700;
  margin-bottom:10px;
}

.dash-alloc{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:14px;
  align-items:center;
}
@media (max-width: 520px){
  .dash-alloc{ grid-template-columns: 1fr; }
}

.dash-alloc__chart{
  width:220px;
  height:220px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dash-alloc__legend{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.legend-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background: rgba(255,255,255,0.02);
}
.legend-row__l{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 0;
}
.legend-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  flex:0 0 auto;
}
.legend-name{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.legend-val{
  font-variant-numeric: tabular-nums;
  font-weight:700;
}

.dash-earn__top{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 700px){
  .dash-earn__top{ grid-template-columns: 1fr; }
}

.dash-spark{
  margin-top:12px;
  margin-bottom:10px; /* keeps the chart border from visually "touching" the caption */
  border:1px solid var(--border);
  border-radius:14px;
  background: rgba(255,255,255,0.02);
  overflow:hidden;
  height:110px;
}

.dash-spark svg{
  width:100%;
  height:100%;
  display:block;   /* prevents baseline/inline SVG whitespace */
  overflow:hidden; /* extra safety for SVG overflow */
}

#dashEarningsSpark{
  width:100%;
  height:110px;
}

.dash-earn__meta{ margin-top:10px; }




/* ===== MapleFi Confirm Modal ===== */
.mf-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 24px;
}
.mf-modal{
  width: 440px;
  max-width: 92vw;
  background: linear-gradient(180deg, rgba(28,28,40,0.98), rgba(18,18,28,0.98));
  border: 1px solid rgba(255,158,77,0.22);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.65);
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  animation: mfModalIn 160ms ease-out forwards;
}
@keyframes mfModalIn{
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.mf-modal-header{
  padding: 18px 18px 10px 18px;
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mf-modal-title{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.mf-modal-subtitle{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.mf-modal-close{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  width: 36px;
  height: 36px;
  border-radius: 12px;
  cursor: pointer;
}
.mf-modal-close:hover{
  background: rgba(255,255,255,0.10);
}
.mf-modal-body{
  padding: 0 18px 14px 18px;
}
.mf-modal-summary{
  background: rgba(255,158,77,0.08);
  border: 1px solid rgba(255,158,77,0.18);
  border-radius: 16px;
  padding: 14px 14px;
  margin-top: 10px;
}
.mf-modal-row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
}
.mf-modal-row .label{ color: var(--muted); }
.mf-modal-row .value{ font-weight: 650; }
.mf-modal-foot{
  padding: 14px 18px 18px 18px;
  display:flex;
  gap: 10px;
}
.mf-btn{
  flex: 1;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.mf-btn:hover{ background: rgba(255,255,255,0.10); }
.mf-btn-primary{
  border: 1px solid rgba(255,158,77,0.35);
  background: linear-gradient(135deg, rgba(255,158,77,0.24), rgba(255,122,122,0.16));
}
.mf-btn-primary:hover{
  background: linear-gradient(135deg, rgba(255,158,77,0.32), rgba(255,122,122,0.22));
}
.mf-modal-note{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12.5px;
}




/* Network alert switch button */
.alert-switch{margin-left:12px; padding:8px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.25); background:rgba(255,255,255,0.1); color:#fff; cursor:pointer; font-weight:600;}
.alert-switch:hover{background:rgba(255,255,255,0.18);}

.slippage-custom input{width:100%; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,0.15); background:rgba(0,0,0,0.2); color:#fff;}
.slippage-custom input::placeholder{color:rgba(255,255,255,0.5);}


/* ===== 2026 UX + RESPONSIVE PATCH ===== */
.hero-logo {
    width: clamp(112px, 18vw, 160px) !important;
    height: auto !important;
    aspect-ratio: 1;
    object-fit: contain;
}

.cta-buttons {
    flex-wrap: wrap;
    align-items: stretch;
}

.cta-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-ai-monitor {
    position: relative;
    min-width: min(100%, 360px);
    max-width: 420px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 193, 84, 0.45);
    border-radius: 22px;
    overflow: hidden;
    isolation: isolate;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.30), transparent 34%),
        linear-gradient(135deg, #ff7a18 0%, #ff4d6d 45%, #7c3aed 100%) !important;
    box-shadow:
        0 14px 34px rgba(255, 94, 58, 0.32),
        0 0 0 1px rgba(255,255,255,0.08) inset;
}

.btn-ai-monitor::before,
.btn-ai-monitor::after {
    content: "";
    position: absolute;
    inset: auto;
    pointer-events: none;
}

.btn-ai-monitor::before {
    width: 180px;
    height: 180px;
    right: -50px;
    top: -72px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.26), rgba(255,255,255,0));
    z-index: -1;
}

.btn-ai-monitor::after {
    inset: 0;
    border-radius: inherit;
    border: 1px solid rgba(255,255,255,0.14);
    opacity: 0.9;
}

.btn-ai-monitor:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow:
        0 20px 44px rgba(255, 94, 58, 0.40),
        0 0 30px rgba(124, 58, 237, 0.18);
}

.btn-ai-monitor__badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #221313;
    background: linear-gradient(135deg, #ffe082, #ffd166);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

.btn-ai-monitor__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: calc(100% - 12px);
}

.btn-ai-monitor__title {
    font-size: 1.12rem;
    font-weight: 800;
    color: #ffffff;
}

.btn-ai-monitor__subtitle {
    display: block;
    font-size: 0.86rem;
    line-height: 1.45;
    color: rgba(255,255,255,0.88);
    font-weight: 500;
    max-width: 28ch;
}

.btn-ai-monitor__shine {
    position: absolute;
    inset: -40% auto auto -20%;
    width: 42%;
    height: 180%;
    transform: rotate(18deg);
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.26), rgba(255,255,255,0));
    animation: aiMonitorShine 4.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes aiMonitorShine {
    0%, 100% { transform: translateX(-130%) rotate(18deg); opacity: 0; }
    15% { opacity: 0.9; }
    40% { transform: translateX(300%) rotate(18deg); opacity: 0; }
}

body.light-mode .btn-ai-monitor {
    border-color: rgba(255, 128, 0, 0.28);
    box-shadow:
        0 16px 34px rgba(255, 111, 66, 0.18),
        0 0 0 1px rgba(255,255,255,0.30) inset;
}

body.light-mode .hero-stats div {
    background: rgba(17, 24, 39, 0.04);
}

body.light-mode .card,
body.light-mode .tokenomics-card,
body.light-mode .stat,
body.light-mode .dash-card,
body.light-mode .legend-row,
body.light-mode .lp-mini,
body.light-mode .farm-stat,
body.light-mode .kv,
body.light-mode .dash-row,
body.light-mode .dash-empty,
body.light-mode .pool-summary {
    background: rgba(255,255,255,0.86);
}

body.light-mode .mobile-menu-toggle,
body.light-mode .btn-theme,
body.light-mode .btn-connect,
body.light-mode .btn-disconnect {
    background: rgba(17, 24, 39, 0.03);
}

body.light-mode .dash-spark {
    background: rgba(17, 24, 39, 0.03);
}

@media (max-width: 900px) {
    .tokenomics-chart canvas {
        max-width: 100%;
        width: 100% !important;
    }

    .realtime-data {
        gap: 14px;
    }
}

@media (max-width: 768px) {
    .header-actions {
        width: auto;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .btn-theme,
    .btn-connect,
    .btn-disconnect {
        min-height: 42px;
    }

    .btn-connect {
        max-width: calc(100vw - 180px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 14px;
    }

    .cta-buttons .btn {
        width: 100%;
        min-width: 0;
    }

    .btn-ai-monitor {
        min-width: 0;
        padding: 18px 16px;
    }

    .btn-ai-monitor__badge {
        position: static;
        width: fit-content;
        margin-bottom: 8px;
    }

    .btn-ai-monitor__subtitle {
        max-width: none;
    }

    .hero {
        padding: 44px 0;
    }

    .hero-content .subtitle {
        font-size: 1rem;
    }

    .tokenomics-chart {
        overflow: hidden;
    }

    .tokenomics-chart canvas {
        max-width: 100%;
        height: auto !important;
    }

    .dashboard-page {
        width: min(100%, 94%);
    }

    .dash-card__head,
    .dash-row,
    .dash-card__foot,
    .dash-totals {
        flex-direction: column;
        align-items: stretch;
    }

    .dash-card__foot {
        justify-content: stretch;
    }

    .dash-card__foot > * {
        width: 100%;
    }

    .mf-modal-backdrop {
        padding: 14px;
    }
}

@media (max-width: 560px) {
    .app-header {
        gap: 10px;
    }

    .logo-container img {
        max-width: 140px;
    }

    .header-actions {
        gap: 8px;
    }

    .btn-theme,
    .btn-disconnect,
    .mobile-menu-toggle {
        padding-inline: 12px;
    }

    .btn-connect {
        font-size: 0.9rem;
    }

    .hero-stats div,
    .stat,
    .tokenomics-card,
    .card {
        width: 100%;
    }
}

/* ===== MAPLEFI FUTURISTIC HOMEPAGE OVERRIDES ===== */
body.home-future {
    --hero-orange: #ff7a36;
    --hero-orange-soft: rgba(255, 122, 54, 0.18);
    --hero-blue: #4cc9ff;
    --hero-blue-soft: rgba(76, 201, 255, 0.18);
    --surface-2: rgba(11, 17, 37, 0.72);
    --surface-3: rgba(255, 255, 255, 0.06);
    background:
        radial-gradient(circle at 20% 0%, rgba(255, 110, 46, 0.16), transparent 28%),
        radial-gradient(circle at 80% 15%, rgba(76, 201, 255, 0.12), transparent 26%),
        linear-gradient(180deg, #050816 0%, #090d1d 40%, #070a16 100%);
}
body.home-future section {
    position: relative;
    overflow: hidden;
}
body.home-future .container {
    position: relative;
    z-index: 2;
}
body.home-future .hero-premium {
    padding: 92px 0 72px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: transparent;
}
body.home-future .hero-noise,
body.home-future .hero-grid-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
body.home-future .hero-noise {
    background-image:
        radial-gradient(rgba(255,255,255,0.06) 0.7px, transparent 0.7px),
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 24px 24px, 80px 80px, 80px 80px;
    mask-image: radial-gradient(circle at center, black 50%, transparent 95%);
    opacity: 0.45;
}
body.home-future .hero-grid-glow {
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 122, 54, 0.30), transparent 24%),
        radial-gradient(circle at 82% 30%, rgba(76, 201, 255, 0.20), transparent 22%),
        radial-gradient(circle at 50% 65%, rgba(255, 140, 80, 0.10), transparent 28%);
    filter: blur(20px);
}
body.home-future .hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    gap: 42px;
    align-items: center;
}
body.home-future .hero-copy,
body.home-future .hero-dashboard {
    position: relative;
}
body.home-future .hero-eyebrow-row,
body.home-future .hero-cta-row,
body.home-future .hero-signal-grid,
body.home-future .panel-metric-grid,
body.home-future .realtime-data-upgraded,
body.home-future .chain-grid,
body.home-future .ai-grid,
body.home-future .feature-grid-future {
    display: grid;
    gap: 16px;
}
body.home-future .hero-eyebrow-row {
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
    margin-bottom: 26px;
}
body.home-future .pill {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #f6d5bf;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
body.home-future .pill-green {
    color: #afffdd;
    box-shadow: inset 0 0 0 1px rgba(100,255,190,0.08);
}
body.home-future .hero-brand-mark {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
}
body.home-future .logo-core-wrap {
    width: 120px;
    height: 120px;
    position: relative;
    display: grid;
    place-items: center;
}
body.home-future .premium-logo {
    width: 82px !important;
    height: 82px !important;
    border-radius: 50%;
    z-index: 2;
    filter: drop-shadow(0 0 18px rgba(255, 122, 54, 0.55));
    animation: mapleFloat 4.5s ease-in-out infinite;
}
body.home-future .logo-ring,
body.home-future .logo-pulse {
    position: absolute;
    border-radius: 50%;
}
body.home-future .logo-ring-1 {
    inset: 4px;
    border: 1px solid rgba(255, 137, 76, 0.28);
    animation: spinSlow 14s linear infinite;
}
body.home-future .logo-ring-2 {
    inset: 14px;
    border: 1px dashed rgba(76, 201, 255, 0.35);
    animation: spinSlowReverse 10s linear infinite;
}
body.home-future .logo-pulse {
    inset: 18px;
    background: radial-gradient(circle, rgba(255, 122, 54, 0.22), transparent 65%);
    animation: pulseGlow 2.8s ease-in-out infinite;
}
body.home-future .brand-signal span,
body.home-future .section-kicker,
body.home-future .panel-label {
    display: block;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffb98d;
    margin-bottom: 8px;
}
body.home-future .brand-signal strong {
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    letter-spacing: 0.05em;
}
body.home-future .hero-title {
    max-width: 11ch;
    font-family: 'Orbitron', sans-serif;
    font-size: clamp(2.8rem, 7vw, 5.4rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-align: left;
    margin: 0 0 20px;
    color: #f6f7ff;
    text-shadow: 0 0 30px rgba(255,255,255,0.07);
}
body.home-future .hero-title span {
    background: linear-gradient(90deg, #fff1d6 0%, #ff8d4f 30%, #7ad9ff 85%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.home-future .hero-subtitle {
    max-width: 700px;
    text-align: left;
    color: #b8c2df;
    font-size: 1.04rem;
    margin-bottom: 28px;
}
body.home-future .hero-cta-row {
    grid-template-columns: repeat(3, max-content);
    justify-content: start;
    align-items: center;
    margin-bottom: 28px;
}
body.home-future .btn-glow,
body.home-future .btn-outline-glow,
body.home-future .ghost-btn {
    min-width: 0;
    position: relative;
    overflow: hidden;
}
body.home-future .btn-glow {
    box-shadow: 0 10px 30px rgba(255, 122, 54, 0.25);
}
body.home-future .btn-outline-glow {
    border: 1px solid rgba(76, 201, 255, 0.28);
    color: #d9f6ff;
    background: rgba(76, 201, 255, 0.06);
}
body.home-future .ghost-btn {
    color: #d0d7f1;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
}
body.home-future .hero-signal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.home-future .signal-card,
body.home-future .chain-card,
body.home-future .metric-card,
body.home-future .terminal-card,
body.home-future .glass-card,
body.home-future .tokenomics-card,
body.home-future .feature-card,
body.home-future .ai-card,
body.home-future .contact-form-card,
body.home-future .contact-info-card,
body.home-future .faq-item {
    background: linear-gradient(180deg, rgba(15, 21, 42, 0.9), rgba(8, 13, 28, 0.92));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 60px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(14px);
}
body.home-future .signal-card {
    padding: 18px;
    border-radius: 18px;
    text-align: left;
}
body.home-future .signal-card span,
body.home-future .metric-card span {
    display: block;
    color: #9aa8c9;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}
body.home-future .signal-card strong,
body.home-future .metric-card strong,
body.home-future .stat strong {
    display: block;
    font-size: clamp(1.3rem, 3vw, 1.85rem);
    margin-bottom: 8px;
}
body.home-future .signal-card p,
body.home-future .metric-card small,
body.home-future .chain-card p {
    color: #93a3c7;
    margin: 0;
}
body.home-future .dashboard-panel {
    padding: 22px;
    border-radius: 28px;
    position: relative;
}
body.home-future .dashboard-panel::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 122, 54, 0.35), transparent 35%, transparent 65%, rgba(76, 201, 255, 0.24));
    z-index: -1;
    opacity: 0.75;
}
body.home-future .panel-topbar,
body.home-future .terminal-head,
body.home-future .mini-notice,
body.home-future .chain-expansion-shell {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
body.home-future .status-badge {
    align-self: flex-start;
    color: #89ffd5;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(65, 255, 166, 0.08);
    border: 1px solid rgba(65,255,166,0.16);
    font-size: 12px;
}
body.home-future .panel-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 18px 0;
}
body.home-future .metric-card,
body.home-future .terminal-card,
body.home-future .realtime-panel,
body.home-future .tokenomics-chart {
    padding: 18px;
    border-radius: 20px;
}
body.home-future .metric-card.feature {
    box-shadow: inset 0 0 0 1px rgba(255, 122, 54, 0.12), 0 16px 40px rgba(255, 122, 54, 0.10);
}
body.home-future .terminal-card {
    margin-top: 8px;
}
body.home-future .terminal-head,
body.home-future .terminal-rows div {
    align-items: center;
}
body.home-future .terminal-head {
    margin-bottom: 14px;
    color: #bac7ea;
    font-size: 13px;
}
body.home-future .terminal-rows {
    display: grid;
    gap: 10px;
}
body.home-future .terminal-rows div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.home-future .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
body.home-future .mini-notice {
    align-items: center;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
}
body.home-future .notice-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ff9a57, #ff5f2f);
    box-shadow: 0 0 18px rgba(255, 122, 54, 0.55);
    flex: 0 0 auto;
}
body.home-future .futuristic-band {
    padding: 84px 0;
}
body.home-future .futuristic-band::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
body.home-future .futuristic-band::after {
    content: '';
    position: absolute;
    top: -80px;
    left: 50%;
    width: 70%;
    height: 160px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 122, 54, 0.12), transparent 60%);
    filter: blur(24px);
    pointer-events: none;
}
body.home-future .section-intro {
    max-width: 820px;
    margin: 0 auto 34px;
    text-align: center;
}
body.home-future .section-intro h2 {
    margin-bottom: 12px;
    font-size: clamp(2rem, 4vw, 3rem);
}
body.home-future .feature-grid-future,
body.home-future .ai-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.home-future .feature-card,
body.home-future .ai-card,
body.home-future .tokenomics-card,
body.home-future .faq-item {
    border-radius: 20px;
    padding: 22px;
}
body.home-future .feature-card .icon,
body.home-future .ai-card .icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(255, 122, 54, 0.18), rgba(76, 201, 255, 0.18));
    margin-bottom: 16px;
    font-size: 24px;
}
body.home-future .tokenomics-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 22px;
    align-items: stretch;
}
body.home-future .tokenomics-chart { min-height: 420px; }
body.home-future .realtime-panel h3 { margin-bottom: 16px; }
body.home-future .realtime-data-upgraded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.home-future .stat {
    padding: 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}
body.home-future .stat span {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #92a3ca;
    margin-bottom: 10px;
}
body.home-future .timeline { max-width: 920px; margin: 0 auto; }
body.home-future .milestone {
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(13, 19, 39, 0.95), rgba(8, 13, 25, 0.95));
    border: 1px solid rgba(255,255,255,0.08);
}
body.home-future .chain-expansion-shell {
    align-items: center;
    padding: 30px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(13, 19, 39, 0.95), rgba(8, 13, 25, 0.95));
    border: 1px solid rgba(255,255,255,0.08);
}
body.home-future .chain-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    flex: 1;
}
body.home-future .chain-card {
    padding: 22px;
    border-radius: 18px;
}
body.home-future .chain-card span {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    margin-bottom: 14px;
    color: #ffb98d;
}
body.home-future .faq-list { max-width: 880px; margin: 0 auto; display: grid; gap: 14px; }
body.home-future .faq-question { font-weight: 700; }
body.home-future .faq-answer { color: #9cabcb; padding-top: 12px; }
body.home-future .contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
body.home-future .contact-form-card,
body.home-future .contact-info-card { border-radius: 24px; padding: 24px; }
body.home-future .social-links.contact-social a {
    display: inline-flex;
    margin: 0 10px 10px 0;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}
body.home-future .reveal-up {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
body.home-future .reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
body.home-future .particle {
    position: fixed;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0));
    pointer-events: none;
    z-index: 0;
}
@keyframes mapleFloat {
    0%,100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.02); }
}
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spinSlowReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes pulseGlow {
    0%,100% { transform: scale(0.95); opacity: 0.45; }
    50% { transform: scale(1.08); opacity: 0.9; }
}
@media (max-width: 1080px) {
    body.home-future .hero-shell,
    body.home-future .tokenomics-layout,
    body.home-future .chain-expansion-shell,
    body.home-future .contact-grid {
        grid-template-columns: 1fr;
        display: grid;
    }
    body.home-future .chain-expansion-shell { padding: 24px; }
    body.home-future .hero-title { max-width: none; }
}
@media (max-width: 820px) {
    body.home-future .hero-premium { padding-top: 72px; min-height: auto; }
    body.home-future .hero-eyebrow-row,
    body.home-future .hero-cta-row,
    body.home-future .feature-grid-future,
    body.home-future .hero-signal-grid,
    body.home-future .panel-metric-grid,
    body.home-future .realtime-data-upgraded,
    body.home-future .chain-grid,
    body.home-future .ai-grid {
        grid-template-columns: 1fr;
    }
    body.home-future .hero-brand-mark,
    body.home-future .panel-topbar,
    body.home-future .terminal-head,
    body.home-future .mini-notice {
        flex-direction: column;
        align-items: flex-start;
    }
    body.home-future .hero-copy,
    body.home-future .section-intro,
    body.home-future .hero-subtitle,
    body.home-future .hero-title {
        text-align: center;
    }
    body.home-future .hero-brand-mark,
    body.home-future .hero-cta-row,
    body.home-future .hero-eyebrow-row { justify-content: center; }
}

/* ===== MAPLEFI HOMEPAGE V3 FIXES ===== */
body.home-future {
    --hf-bg-1: #050816;
    --hf-bg-2: #0a1023;
    --hf-text: #f2f5ff;
    --hf-muted: #aeb9d8;
    --hf-panel: rgba(9, 14, 31, 0.82);
    --hf-panel-2: rgba(15, 22, 45, 0.94);
    --hf-border: rgba(255,255,255,0.08);
    --hf-orange: #ff7a36;
    --hf-orange-2: #ffb067;
    --hf-blue: #55d5ff;
    --hf-green: #87ffcb;
    background:
        radial-gradient(circle at 15% 0%, rgba(255, 120, 54, 0.16), transparent 28%),
        radial-gradient(circle at 85% 15%, rgba(85, 213, 255, 0.14), transparent 24%),
        linear-gradient(180deg, #040713 0%, #080d1d 38%, #060913 100%);
}

body.home-future.light-mode {
    --hf-bg-1: #eef3ff;
    --hf-bg-2: #f9fbff;
    --hf-text: #161b2d;
    --hf-muted: #52607d;
    --hf-panel: rgba(255, 255, 255, 0.84);
    --hf-panel-2: rgba(246, 249, 255, 0.96);
    --hf-border: rgba(17, 26, 52, 0.10);
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 145, 77, 0.14), transparent 26%),
        radial-gradient(circle at 88% 18%, rgba(77, 174, 255, 0.13), transparent 24%),
        linear-gradient(180deg, #eff4ff 0%, #f8fbff 36%, #eef3ff 100%);
}

body.home-future section {
    overflow: clip;
}

body.home-future .container {
    max-width: 1240px;
}

body.home-future .hero-premium {
    padding: 104px 0 84px;
    min-height: calc(100vh - 70px);
}

body.home-future .hero-shell {
    grid-template-columns: minmax(0, 1.06fr) minmax(370px, 0.94fr);
    gap: 40px;
}

body.home-future .hero-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.06);
    pointer-events: none;
    filter: blur(0.2px);
    opacity: 0.55;
}

body.home-future .hero-orbit-a {
    width: 520px;
    height: 520px;
    top: 80px;
    right: -120px;
    border-color: rgba(85, 213, 255, 0.14);
    animation: orbitFloat 16s ease-in-out infinite;
}

body.home-future .hero-orbit-b {
    width: 360px;
    height: 360px;
    top: 120px;
    left: -110px;
    border-color: rgba(255, 130, 61, 0.14);
    animation: orbitFloatReverse 18s ease-in-out infinite;
}

body.home-future .hero-copy,
body.home-future .hero-dashboard,
body.home-future .section-intro,
body.home-future .intelligence-shell,
body.home-future .chain-future-layout,
body.home-future .faq-list,
body.home-future .contact-grid {
    position: relative;
    z-index: 2;
}

body.home-future .hero-brand-mark {
    margin-bottom: 24px;
}

body.home-future .logo-core-wrap {
    width: 118px;
    height: 118px;
}

body.home-future .premium-logo {
    width: 76px !important;
    height: 76px !important;
    object-fit: contain;
}

body.home-future .brand-signal strong,
body.home-future .hero-title,
body.home-future .section-intro h2,
body.home-future .intelligence-copy h2,
body.home-future .chain-future-copy h2,
body.home-future .contact-us h2 {
    color: var(--hf-text);
}

body.home-future .brand-signal span,
body.home-future .section-kicker,
body.home-future .panel-label {
    color: #ffb280;
}

body.home-future.light-mode .brand-signal span,
body.home-future.light-mode .section-kicker,
body.home-future.light-mode .panel-label {
    color: #c56520;
}

body.home-future .hero-title {
    max-width: 10.2ch;
    font-size: clamp(3rem, 6vw, 5.6rem);
    line-height: 0.94;
    margin-bottom: 22px;
}

body.home-future .hero-title span {
    background: linear-gradient(90deg, #fff2dc 0%, #ff9559 35%, #6bd7ff 88%);
    -webkit-background-clip: text;
    background-clip: text;
}

body.home-future.light-mode .hero-title span {
    background: linear-gradient(90deg, #dd6f20 0%, #ef8940 32%, #197fc0 92%);
    -webkit-background-clip: text;
    background-clip: text;
}

body.home-future .hero-subtitle,
body.home-future .section-intro p,
body.home-future .intelligence-copy p,
body.home-future .chain-future-copy p,
body.home-future .contact-us .section-intro p,
body.home-future .contact-info-card p,
body.home-future .faq-answer,
body.home-future .signal-card p,
body.home-future .feature-card p,
body.home-future .ai-card p,
body.home-future .chain-card p,
body.home-future .milestone p,
body.home-future .tokenomics-card p,
body.home-future .mini-notice p,
body.home-future .metric-card small,
body.home-future .intelligence-list .intel-line span,
body.home-future .ai-spotlight p {
    color: var(--hf-muted);
}

body.home-future .hero-cta-row {
    gap: 14px;
    margin-bottom: 30px;
}

body.home-future .btn-glow,
body.home-future .btn-outline-glow,
body.home-future .ghost-btn,
body.home-future .social-links.contact-social a {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

body.home-future .btn-glow:hover,
body.home-future .btn-outline-glow:hover,
body.home-future .ghost-btn:hover,
body.home-future .social-links.contact-social a:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

body.home-future .btn-outline-glow {
    border-color: rgba(85, 213, 255, 0.22);
    color: #d9f7ff;
    background: rgba(85, 213, 255, 0.08);
}

body.home-future.light-mode .btn-outline-glow {
    color: #0f4f78;
    background: rgba(70, 155, 255, 0.10);
    border-color: rgba(42, 102, 166, 0.18);
}

body.home-future .ghost-btn {
    color: var(--hf-text);
    background: rgba(255,255,255,0.04);
}

body.home-future.light-mode .ghost-btn {
    background: rgba(23, 34, 58, 0.04);
    border-color: rgba(23, 34, 58, 0.10);
}

body.home-future .signal-card,
body.home-future .chain-card,
body.home-future .metric-card,
body.home-future .terminal-card,
body.home-future .glass-card,
body.home-future .tokenomics-card,
body.home-future .feature-card,
body.home-future .ai-card,
body.home-future .contact-form-card,
body.home-future .contact-info-card,
body.home-future .faq-item,
body.home-future .ai-spotlight,
body.home-future .expansion-metric,
body.home-future .spot-chip,
body.home-future .command-item {
    background: linear-gradient(180deg, var(--hf-panel-2), var(--hf-panel));
    border: 1px solid var(--hf-border);
    color: var(--hf-text);
}

body.home-future.light-mode .signal-card,
body.home-future.light-mode .chain-card,
body.home-future.light-mode .metric-card,
body.home-future.light-mode .terminal-card,
body.home-future.light-mode .glass-card,
body.home-future.light-mode .tokenomics-card,
body.home-future.light-mode .feature-card,
body.home-future.light-mode .ai-card,
body.home-future.light-mode .contact-form-card,
body.home-future.light-mode .contact-info-card,
body.home-future.light-mode .faq-item,
body.home-future.light-mode .ai-spotlight,
body.home-future.light-mode .expansion-metric,
body.home-future.light-mode .spot-chip,
body.home-future.light-mode .command-item {
    box-shadow: 0 18px 48px rgba(26, 42, 72, 0.10), inset 0 1px 0 rgba(255,255,255,0.55);
}

body.home-future .feature-grid-future,
body.home-future .hero-signal-grid,
body.home-future .panel-metric-grid,
body.home-future .realtime-data-upgraded,
body.home-future .ai-grid,
body.home-future .chain-grid,
body.home-future .intelligence-list,
body.home-future .expansion-metrics,
body.home-future .ai-spotlight-grid,
body.home-future .hero-command-strip {
    display: grid;
}

body.home-future .hero-signal-grid,
body.home-future .feature-grid-future,
body.home-future .ai-grid {
    gap: 18px;
}

body.home-future .hero-signal-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.home-future .signal-card,
body.home-future .feature-card,
body.home-future .ai-card,
body.home-future .tokenomics-card,
body.home-future .faq-item,
body.home-future .chain-card {
    border-radius: 22px;
}

body.home-future .feature-card,
body.home-future .ai-card,
body.home-future .signal-card,
body.home-future .tokenomics-card,
body.home-future .chain-card {
    padding: 22px;
}

body.home-future .feature-card h3,
body.home-future .ai-card h3,
body.home-future .signal-card strong,
body.home-future .chain-card strong,
body.home-future .tokenomics-card h3,
body.home-future .milestone h3,
body.home-future .faq-question,
body.home-future .dashboard-panel h3,
body.home-future .realtime-panel h3,
body.home-future .ai-spotlight h3 {
    color: var(--hf-text);
}

body.home-future .feature-card,
body.home-future .ai-card {
    min-height: 100%;
}

body.home-future .feature-card .icon,
body.home-future .ai-card .icon {
    background: linear-gradient(135deg, rgba(255, 122, 54, 0.18), rgba(85, 213, 255, 0.18));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 22px rgba(0,0,0,0.20);
}

body.home-future.light-mode .feature-card .icon,
body.home-future.light-mode .ai-card .icon {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 12px 24px rgba(36, 76, 130, 0.10);
}

body.home-future .dashboard-panel {
    padding: 24px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(12, 18, 38, 0.96), rgba(10, 15, 30, 0.92));
}

body.home-future.light-mode .dashboard-panel {
    background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(243,247,255,0.96));
}

body.home-future .panel-topbar h3,
body.home-future .terminal-rows strong,
body.home-future .terminal-rows span,
body.home-future .metric-card strong,
body.home-future .metric-card span,
body.home-future .terminal-head,
body.home-future .mini-notice,
body.home-future .command-item span,
body.home-future .command-item strong,
body.home-future .spot-chip span,
body.home-future .spot-chip strong,
body.home-future .expansion-metric span,
body.home-future .expansion-metric strong,
body.home-future .stat span,
body.home-future .stat strong,
body.home-future .tokenomics-card h3,
body.home-future .tokenomics-card p {
    color: var(--hf-text);
}

body.home-future .metric-card span,
body.home-future .terminal-rows span,
body.home-future .command-item span,
body.home-future .spot-chip span,
body.home-future .expansion-metric span,
body.home-future .stat span {
    color: var(--hf-muted);
}

body.home-future .hero-command-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

body.home-future .command-item,
body.home-future .spot-chip,
body.home-future .expansion-metric {
    padding: 14px 16px;
    border-radius: 18px;
}

body.home-future .command-item strong,
body.home-future .spot-chip strong,
body.home-future .expansion-metric strong {
    display: block;
    margin-top: 6px;
    font-size: 1rem;
}

body.home-future .intelligence-band,
body.home-future .tokenomics,
body.home-future .roadmap,
body.home-future .chain-expansion,
body.home-future .faq,
body.home-future .contact-us {
    padding: 86px 0;
}

body.home-future .section-divider-soft::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.09), transparent);
}

body.home-future.light-mode .section-divider-soft::before {
    background: linear-gradient(90deg, transparent, rgba(17, 26, 52, 0.10), transparent);
}

body.home-future .section-divider-soft::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -70px;
    width: min(800px, 65vw);
    height: 160px;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 122, 54, 0.12), transparent 60%);
    filter: blur(28px);
    pointer-events: none;
}

body.home-future.light-mode .section-divider-soft::after {
    background: radial-gradient(circle, rgba(255, 155, 90, 0.12), transparent 62%);
}

body.home-future .intelligence-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: stretch;
}

body.home-future .intelligence-copy,
body.home-future .chain-future-copy {
    padding-right: 12px;
}

body.home-future .intelligence-list {
    gap: 12px;
    margin-top: 22px;
}

body.home-future .intel-line {
    padding: 14px 16px;
    border-left: 2px solid rgba(255, 122, 54, 0.55);
    background: rgba(255,255,255,0.03);
    border-radius: 0 16px 16px 0;
}

body.home-future.light-mode .intel-line {
    background: rgba(14, 29, 56, 0.035);
    border-left-color: rgba(220, 107, 44, 0.62);
}

body.home-future .intel-line strong {
    display: block;
    color: var(--hf-text);
    margin-bottom: 4px;
}

body.home-future .intelligence-grid {
    display: grid;
    gap: 18px;
}

body.home-future .ai-spotlight {
    border-radius: 28px;
    padding: 24px;
    position: relative;
    overflow: hidden;
}

body.home-future .ai-spotlight::before {
    content: '';
    position: absolute;
    inset: auto -40px -70px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(85, 213, 255, 0.18), transparent 62%);
    pointer-events: none;
}

body.home-future .ai-spotlight-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 20px;
}

body.home-future .tokenomics-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 20px;
}

body.home-future .tokenomics-layout {
    gap: 18px;
}

body.home-future .tokenomics-chart,
body.home-future .realtime-panel {
    border-radius: 26px;
}

body.home-future .tokenomics-chart {
    min-height: 430px;
}

body.home-future .realtime-panel {
    padding: 20px;
}

body.home-future .realtime-data-upgraded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

body.home-future .stat {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.home-future .timeline {
    display: grid;
    gap: 16px;
}

body.home-future .milestone {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 18px;
    padding: 0;
    overflow: hidden;
}

body.home-future .milestone .date {
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, rgba(255, 122, 54, 0.90), rgba(255, 91, 47, 0.82));
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.02em;
    min-height: 100%;
}

body.home-future .milestone .content {
    padding: 22px 24px;
}

body.home-future .milestone .content h3 {
    margin-bottom: 8px;
}

body.home-future .chain-future-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 24px;
    align-items: start;
}

body.home-future .expansion-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 22px;
}

body.home-future .radar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.home-future .chain-card span {
    width: 40px;
    height: 40px;
    background: linear-gradient(180deg, rgba(255, 122, 54, 0.16), rgba(85, 213, 255, 0.16));
}

body.home-future .faq-list {
    gap: 16px;
}

body.home-future .faq-item {
    padding: 0;
    overflow: hidden;
}

body.home-future .faq-question {
    padding: 22px 24px;
    position: relative;
}

body.home-future .faq-question::after {
    right: 24px;
}

body.home-future .faq-answer {
    padding: 0 24px 22px;
}

body.home-future .contact-grid {
    align-items: stretch;
}

body.home-future .contact-form-card,
body.home-future .contact-info-card {
    min-height: 100%;
}

body.home-future .contact-form-card form {
    display: grid;
    gap: 14px;
}

body.home-future .contact-form-card input,
body.home-future .contact-form-card textarea {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--hf-border);
    background: rgba(255,255,255,0.03);
    color: var(--hf-text);
    padding: 14px 15px;
    outline: none;
}

body.home-future.light-mode .contact-form-card input,
body.home-future.light-mode .contact-form-card textarea {
    background: rgba(18, 31, 60, 0.03);
}

body.home-future .contact-form-card input::placeholder,
body.home-future .contact-form-card textarea::placeholder {
    color: var(--hf-muted);
}

body.home-future .contact-form-card input:focus,
body.home-future .contact-form-card textarea:focus {
    border-color: rgba(85, 213, 255, 0.35);
    box-shadow: 0 0 0 3px rgba(85, 213, 255, 0.10);
}

body.home-future .contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 18px 0;
}

body.home-future .social-links.contact-social a {
    margin: 0;
    color: var(--hf-text);
}

body.home-future .social-links.contact-social a:hover {
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

body.home-future .contact-details p strong {
    color: var(--hf-text);
}

body.home-future .particle {
    position: fixed;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,255,255,0));
    pointer-events: none;
    z-index: 0;
}

body.home-future .reveal-up,
body.home-future .reveal-up.is-visible {
    opacity: 1;
    transform: none;
}

body.home-future.motion-ready .reveal-up.is-visible {
    animation: riseIn 0.7s cubic-bezier(.22,.61,.36,1) both;
}

body.home-future.light-mode .pill {
    color: #9d531f;
    background: rgba(255,255,255,0.6);
    border-color: rgba(15, 27, 52, 0.08);
}

body.home-future.light-mode .pill-green {
    color: #1b7f58;
}

body.home-future.light-mode .status-badge {
    color: #0f7c55;
    background: rgba(55, 192, 127, 0.10);
    border-color: rgba(55, 192, 127, 0.18);
}

body.home-future.light-mode .hero-grid-glow {
    filter: blur(18px);
}

body.home-future.light-mode .mini-notice {
    background: rgba(18, 31, 60, 0.04);
}

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes orbitFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-20px, 18px, 0) scale(1.03); }
}

@keyframes orbitFloatReverse {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(18px, -14px, 0) scale(0.98); }
}

@media (max-width: 1180px) {
    body.home-future .hero-title {
        max-width: 11.4ch;
        font-size: clamp(2.8rem, 5vw, 4.7rem);
    }

    body.home-future .intelligence-shell,
    body.home-future .chain-future-layout,
    body.home-future .hero-shell {
        grid-template-columns: 1fr;
    }

    body.home-future .hero-dashboard {
        max-width: 760px;
        width: 100%;
    }

    body.home-future .hero-command-strip,
    body.home-future .ai-spotlight-grid,
    body.home-future .tokenomics-grid,
    body.home-future .expansion-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    body.home-future .hero-premium,
    body.home-future .intelligence-band,
    body.home-future .tokenomics,
    body.home-future .roadmap,
    body.home-future .chain-expansion,
    body.home-future .faq,
    body.home-future .contact-us {
        padding: 72px 0;
    }

    body.home-future .hero-eyebrow-row,
    body.home-future .hero-cta-row,
    body.home-future .hero-signal-grid,
    body.home-future .panel-metric-grid,
    body.home-future .realtime-data-upgraded,
    body.home-future .feature-grid-future,
    body.home-future .ai-grid,
    body.home-future .radar-grid,
    body.home-future .contact-grid {
        grid-template-columns: 1fr;
    }

    body.home-future .hero-title,
    body.home-future .hero-subtitle,
    body.home-future .hero-copy,
    body.home-future .section-intro,
    body.home-future .intelligence-copy,
    body.home-future .chain-future-copy {
        text-align: center;
    }

    body.home-future .hero-brand-mark,
    body.home-future .hero-cta-row,
    body.home-future .hero-eyebrow-row {
        justify-content: center;
    }

    body.home-future .hero-brand-mark,
    body.home-future .panel-topbar,
    body.home-future .terminal-head,
    body.home-future .mini-notice {
        flex-direction: column;
        align-items: flex-start;
    }

    body.home-future .hero-brand-mark {
        align-items: center;
    }

    body.home-future .hero-title {
        max-width: none;
        line-height: 0.98;
    }

    body.home-future .milestone {
        grid-template-columns: 1fr;
    }

    body.home-future .milestone .date {
        min-height: 64px;
    }

    body.home-future .ai-spotlight-grid,
    body.home-future .hero-command-strip,
    body.home-future .tokenomics-grid,
    body.home-future .expansion-metrics {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    body.home-future .container {
        padding: 0 16px;
    }

    body.home-future .hero-premium {
        padding-top: 78px;
        padding-bottom: 58px;
    }

    body.home-future .hero-eyebrow-row,
    body.home-future .hero-cta-row {
        grid-template-columns: 1fr;
        width: 100%;
    }

    body.home-future .hero-cta-row .btn,
    body.home-future .social-links.contact-social a {
        width: 100%;
    }

    body.home-future .dashboard-panel,
    body.home-future .ai-spotlight,
    body.home-future .contact-form-card,
    body.home-future .contact-info-card,
    body.home-future .tokenomics-chart,
    body.home-future .realtime-panel,
    body.home-future .feature-card,
    body.home-future .ai-card,
    body.home-future .signal-card,
    body.home-future .chain-card,
    body.home-future .tokenomics-card,
    body.home-future .faq-item {
        border-radius: 20px;
    }

    body.home-future .hero-command-strip,
    body.home-future .ai-spotlight-grid,
    body.home-future .tokenomics-grid,
    body.home-future .expansion-metrics,
    body.home-future .realtime-data-upgraded {
        grid-template-columns: 1fr;
    }

    body.home-future .terminal-rows div {
        align-items: flex-start;
        flex-direction: column;
    }

    body.home-future .logo-core-wrap {
        width: 104px;
        height: 104px;
    }

    body.home-future .premium-logo {
        width: 68px !important;
        height: 68px !important;
    }

    body.home-future .section-intro h2,
    body.home-future .intelligence-copy h2,
    body.home-future .chain-future-copy h2,
    body.home-future .contact-us h2 {
        font-size: clamp(1.9rem, 8vw, 2.5rem);
    }

    body.home-future .hero-title {
        font-size: clamp(2.2rem, 12vw, 3.3rem);
    }

    body.home-future .particle {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home-future .hero-orbit,
    body.home-future .premium-logo,
    body.home-future .logo-ring,
    body.home-future .logo-pulse,
    body.home-future .particle {
        animation: none !important;
    }

    body.home-future .btn-glow,
    body.home-future .btn-outline-glow,
    body.home-future .ghost-btn,
    body.home-future .social-links.contact-social a,
    body.home-future .feature-card,
    body.home-future .ai-card,
    body.home-future .chain-card {
        transition: none !important;
    }
}

@media print {
    body.home-future .reveal-up,
    body.home-future .reveal-up.is-visible {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    body.home-future .particle,
    body.home-future .hero-orbit,
    body.home-future .hero-noise,
    body.home-future .hero-grid-glow {
        display: none !important;
    }
}

/* MapleFi homepage refinement patch */
body.home-future .hero-title {
    max-width: 13.2ch;
    display: grid;
    gap: 2px;
}

body.home-future .hero-title-lead {
    display: block;
    font-size: 0.42em;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c7d3f3;
    margin-bottom: 4px;
    background: none;
    -webkit-text-fill-color: currentColor;
}

body.home-future .hero-title-accent {
    display: block;
    line-height: 0.94;
    max-width: 9.5ch;
    text-wrap: balance;
}

body.home-future .hero-title-rest {
    display: block;
    font-size: 0.86em;
    line-height: 1.02;
    letter-spacing: -0.025em;
    color: var(--hf-text);
    max-width: 12.2ch;
}

body.home-future .hero-signal-grid {
    align-items: stretch;
}

body.home-future .signal-card.signal-card-wide {
    min-height: 196px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
}

body.home-future .signal-card.signal-card-wide strong {
    margin-bottom: 0;
    min-height: 2.8em;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.08;
}

body.home-future .signal-card.signal-card-wide p {
    margin-top: auto;
}

body.home-future .tokenomics-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr);
    gap: 22px;
}

body.home-future .tokenomics-chart {
    display: flex;
    flex-direction: column;
    padding: 24px;
    overflow: hidden;
}

body.home-future .tokenomics-chart-head {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(260px, 1.1fr);
    gap: 16px;
    align-items: end;
    margin-bottom: 14px;
}

body.home-future .tokenomics-chart-head h3 {
    margin: 0;
    color: var(--hf-text);
}

body.home-future .tokenomics-chart-head p {
    margin: 0;
    color: var(--hf-muted);
    text-align: right;
}

body.home-future .tokenomics-chart-stage {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0 0;
}

body.home-future .tokenomics-chart canvas,
body.home-future.light-mode .tokenomics-chart canvas {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 340px !important;
    max-height: 380px;
    margin: 0 auto;
    display: block;
    box-shadow: none;
}

@media (max-width: 1180px) {
    body.home-future .hero-title {
        max-width: 14ch;
    }

    body.home-future .hero-title-accent,
    body.home-future .hero-title-rest {
        max-width: none;
    }
}

@media (max-width: 900px) {
    body.home-future .hero-title {
        display: block;
        max-width: none;
    }

    body.home-future .hero-title-lead {
        margin-bottom: 8px;
    }

    body.home-future .hero-title-accent,
    body.home-future .hero-title-rest {
        max-width: none;
    }

    body.home-future .signal-card.signal-card-wide {
        min-height: 0;
    }

    body.home-future .signal-card.signal-card-wide strong {
        min-height: 0;
    }

    body.home-future .tokenomics-layout {
        grid-template-columns: 1fr;
    }

    body.home-future .tokenomics-chart-head {
        grid-template-columns: 1fr;
    }

    body.home-future .tokenomics-chart-head p {
        text-align: left;
    }
}

@media (max-width: 640px) {
    body.home-future .hero-title-rest {
        font-size: 0.92em;
        line-height: 1.03;
    }

    body.home-future .tokenomics-chart {
        padding: 20px;
    }

    body.home-future .tokenomics-chart-stage {
        min-height: 300px;
    }

    body.home-future .tokenomics-chart canvas,
    body.home-future.light-mode .tokenomics-chart canvas {
        min-height: 300px !important;
        max-height: 340px;
    }
}


/* ===== 2026 THEME COMPATIBILITY PATCH ===== */
:root {
    --surface-soft: rgba(255,255,255,0.04);
    --surface-strong: rgba(255,255,255,0.08);
    --overlay-bg: rgba(0,0,0,0.66);
    --modal-surface: linear-gradient(180deg, rgba(13,18,39,0.96), rgba(9,12,28,0.96));
    --modal-border-strong: rgba(255,158,77,0.22);
    --summary-warn-bg: rgba(255,158,77,0.10);
    --summary-warn-border: rgba(255,158,77,0.24);
    --summary-danger-bg: rgba(255,77,77,0.10);
    --summary-danger-border: rgba(255,77,77,0.24);
    --summary-success-bg: rgba(77,255,145,0.10);
    --summary-success-border: rgba(77,255,145,0.24);
}

body.light-mode {
    --surface-soft: rgba(17,24,39,0.035);
    --surface-strong: rgba(17,24,39,0.06);
    --overlay-bg: rgba(15,23,42,0.36);
    --modal-surface: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
    --modal-border-strong: rgba(255,158,77,0.18);
    --summary-warn-bg: rgba(255,158,77,0.10);
    --summary-warn-border: rgba(255,158,77,0.22);
    --summary-danger-bg: rgba(255,77,77,0.08);
    --summary-danger-border: rgba(255,77,77,0.18);
    --summary-success-bg: rgba(22,163,74,0.09);
    --summary-success-border: rgba(22,163,74,0.18);
}

.quote-box,
.preview-box,
.pool-info,
.stat-item,
.stat-card,
.input-wrapper,
.token-select,
.tabs,
.token-selector-modal,
.step-card,
.how-to-farm,
.pool-card,
.pool-summary,
.selector-header,
.token-item,
.percentage-selector button,
.slippage-btn {
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.main-content {
    background:
      radial-gradient(circle at top, rgba(255,158,77,0.08), transparent 22%),
      radial-gradient(circle at bottom right, rgba(76,201,255,0.05), transparent 20%),
      var(--bg);
}

body.light-mode .main-content {
    background:
      radial-gradient(circle at top, rgba(255,158,77,0.08), transparent 22%),
      radial-gradient(circle at bottom right, rgba(59,130,246,0.06), transparent 18%),
      linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

body.light-mode .farming-hero {
    background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
    border-color: rgba(255,158,77,0.16);
    box-shadow: 0 18px 40px rgba(15,23,42,0.08);
}

body.light-mode .stat-card,
body.light-mode .pool-card,
body.light-mode .how-to-farm,
body.light-mode .step-card,
body.light-mode .input-wrapper,
body.light-mode .token-select,
body.light-mode .tabs,
body.light-mode .token-selector-modal,
body.light-mode .preview-box,
body.light-mode .quote-box,
body.light-mode .pool-info,
body.light-mode .stat-item,
body.light-mode .liquidity-card,
body.light-mode .swap-card,
body.light-mode .wrap-card {
    background: rgba(255,255,255,0.94);
    border-color: rgba(15,23,42,0.08);
    box-shadow: 0 16px 34px rgba(15,23,42,0.06);
}

body.light-mode .token-select:hover,
body.light-mode .token-item:hover,
body.light-mode .tab:hover,
body.light-mode .slippage-btn:hover,
body.light-mode .percentage-selector button:hover,
body.light-mode .modal-close:hover,
body.light-mode .mf-modal-close:hover {
    background: rgba(255,158,77,0.10);
}

body.light-mode .pool-summary {
    background: linear-gradient(135deg, rgba(255,245,240,0.96), rgba(255,255,255,0.98));
    border-color: rgba(255,158,77,0.16);
    box-shadow: 0 14px 28px rgba(15,23,42,0.05);
}

body.light-mode .pool-summary .value.highlight,
body.light-mode .highlight,
body.light-mode .pool-badge,
body.light-mode .pool-arrow,
body.light-mode .max-btn,
body.light-mode .section-title,
body.light-mode .btn-theme:hover,
body.light-mode .btn-connect:hover,
body.light-mode .btn-disconnect:hover {
    color: #f97316;
}

body.light-mode .pool-symbol,
body.light-mode .btn-small.primary,
body.light-mode .btn-action.primary,
body.light-mode .btn-submit,
body.light-mode .btn-swap {
    box-shadow: 0 10px 22px rgba(249,115,22,0.14);
}

body.light-mode .btn-add,
body.light-mode .btn-harvest {
    box-shadow: 0 10px 22px rgba(22,163,74,0.14);
}

body.light-mode .tab.active,
body.light-mode .slippage-btn.active {
    background: linear-gradient(90deg, #ff6b57, #ff9e4d);
    border-color: transparent;
}

body.light-mode .token-item div[style*="color: #888"],
body.light-mode .selector-header button,
body.light-mode .balance,
body.light-mode .stat-label,
body.light-mode .info-row span:first-child,
body.light-mode .contact-details p,
body.light-mode .faq-answer,
body.light-mode .realtime-data em {
    color: var(--muted) !important;
}

.modal-overlay,
.mf-modal-backdrop {
    background: var(--overlay-bg);
}

.mf-modal {
    background: var(--modal-surface);
    border: 1px solid var(--modal-border-strong);
    box-shadow: 0 28px 70px rgba(0,0,0,0.34);
}

.mf-modal-close {
    background: var(--surface-soft);
    color: var(--text);
    border: 1px solid var(--border);
}

.mf-modal-title,
.mf-modal-subtitle,
.mf-modal-body,
.mf-modal-note,
.mf-modal-row .label,
.mf-modal-row .value,
.modal-header h3,
.modal-body,
.modal-body p,
.modal-body span,
.modal-body div {
    color: var(--text);
}

.mf-modal-summary {
    background: var(--surface-soft);
    border: 1px solid var(--border);
}

.mf-modal-note {
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
}

body.light-mode .mf-modal,
body.light-mode .modal-content {
    box-shadow: 0 28px 70px rgba(15,23,42,0.18);
}

body.light-mode .modal-content,
body.light-mode .mf-modal {
    background: var(--modal-surface);
    color: var(--text);
}

body.light-mode .mf-btn {
    background: rgba(15,23,42,0.03);
    border-color: rgba(15,23,42,0.08);
    color: var(--text);
}

body.light-mode .mf-btn:hover {
    background: rgba(249,115,22,0.08);
    border-color: rgba(249,115,22,0.22);
}

body.light-mode .mf-btn-primary {
    background: linear-gradient(135deg, rgba(255,158,77,0.16), rgba(255,122,122,0.12));
    border-color: rgba(249,115,22,0.24);
}

body.light-mode .mf-modal-row + .mf-modal-row {
    border-top-color: rgba(15,23,42,0.08);
}

.mf-modal-row + .mf-modal-row {
    border-top: 1px solid rgba(255,255,255,0.06);
}

.mf-modal-summary.is-danger { background: var(--summary-danger-bg) !important; border-color: var(--summary-danger-border) !important; }
.mf-modal-summary.is-warning { background: var(--summary-warn-bg) !important; border-color: var(--summary-warn-border) !important; }
.mf-modal-summary.is-success { background: var(--summary-success-bg) !important; border-color: var(--summary-success-border) !important; }
.mf-modal-note.is-warning { background: var(--summary-warn-bg) !important; border-left: 3px solid #ff9e4d; }
.mf-modal-note.is-success { background: var(--summary-success-bg) !important; border-left: 3px solid #22c55e; }
.mf-modal-note.is-danger { background: var(--summary-danger-bg) !important; border-left: 3px solid #ef4444; }

.value-accent { color: #ff9e4d !important; }
.value-danger { color: #ef4444 !important; }
.value-success { color: #22c55e !important; }
.note-accent { color: #ff9e4d !important; }

.farm-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.farm-summary-item {
    text-align: center;
    padding: 10px 8px;
}

.farm-summary-item .label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

.farm-summary-item .value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

@media (max-width: 768px) {
    .stats-grid,
    .farm-summary-grid,
    .pool-stats,
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .mf-modal-foot {
        flex-direction: column;
    }

    .mf-btn,
    .mf-btn-primary,
    .btn-small {
        width: 100%;
    }
}


/* ===== HEADER POLISH V3 ===== */
.app-header {
  gap: 18px;
}

.logo-container {
  flex: 0 0 auto;
  min-width: 0;
}

.logo-container img,
#logo {
  width: auto !important;
  height: 34px;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

#mainNav {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}

#mainNav > a,
#mainNav > .nav-parent {
  flex: 0 0 auto;
}

#mainNav a {
  white-space: nowrap;
}

.header-actions {
  flex: 0 0 auto;
  align-items: center;
}

.nav-parent {
  position: relative;
}

.nav-ecosystem {
  display: flex;
  align-items: center;
}

.nav-parent-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  min-height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(135deg, rgba(255,122,54,0.14), rgba(76,201,255,0.09));
  box-shadow: 0 10px 24px rgba(5,12,30,0.24), inset 0 1px 0 rgba(255,255,255,0.05);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.nav-parent-trigger:hover,
.nav-parent.open .nav-parent-trigger {
  transform: translateY(-1px);
  border-color: rgba(255,158,77,0.34);
  box-shadow: 0 16px 34px rgba(255,122,54,0.15), 0 10px 24px rgba(76,201,255,0.10);
}

.nav-parent-kicker {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffb789;
  opacity: 0.95;
}

.nav-parent-title {
  font-weight: 700;
  color: var(--text);
}

.nav-parent-visual {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,132,72,0.20), rgba(72,106,255,0.18));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 18px rgba(0,0,0,0.22);
  overflow: hidden;
  isolation: isolate;
}

.nav-parent-visual::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 0deg, rgba(255,158,77,0) 0deg, rgba(255,158,77,0.75) 58deg, rgba(76,201,255,0.18) 180deg, rgba(255,158,77,0) 320deg);
  animation: mapleVerseSpin 5.8s linear infinite;
  opacity: 0.95;
}

.nav-parent-visual::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 11px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.12), transparent 42%), linear-gradient(180deg, rgba(7,12,27,0.84), rgba(8,12,26,0.92));
  z-index: -1;
}

.nav-parent-visual-ring {
  position: absolute;
  inset: 7px;
  border-radius: 999px;
  border: 1px solid rgba(76,201,255,0.24);
  box-shadow: 0 0 18px rgba(44,121,255,0.18), inset 0 0 8px rgba(255,158,77,0.10);
}

.nav-parent-visual-core {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6df, #ffb35c 58%, #ff7a36 100%);
  box-shadow: 0 0 10px rgba(255,158,77,0.55), 0 0 20px rgba(76,201,255,0.18);
}

.nav-parent-visual-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(117,214,255,0.95);
  box-shadow: 0 0 10px rgba(117,214,255,0.5);
  animation: mapleVersePulse 2.4s ease-in-out infinite;
}

.nav-parent-visual-dot-one { top: 8px; right: 10px; animation-delay: 0s; }
.nav-parent-visual-dot-two { bottom: 9px; left: 8px; animation-delay: 0.45s; }
.nav-parent-visual-dot-three { top: 12px; left: 9px; animation-delay: 0.9s; }

.nav-parent-visual-arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  right: 6px;
  bottom: 7px;
  border-right: 2px solid rgba(255,255,255,0.9);
  border-bottom: 2px solid rgba(255,255,255,0.9);
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform 0.26s ease, opacity 0.22s ease;
  opacity: 0.88;
}

.nav-parent.open .nav-parent-visual,
.nav-parent:hover .nav-parent-visual {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 28px rgba(255,122,54,0.18), 0 8px 20px rgba(76,201,255,0.14);
}

.nav-parent.open .nav-parent-visual-arrow,
.nav-parent:hover .nav-parent-visual-arrow {
  transform: rotate(225deg);
}

@keyframes mapleVerseSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes mapleVersePulse {
  0%, 100% { transform: scale(0.9); opacity: 0.65; }
  50% { transform: scale(1.25); opacity: 1; }
}

.nav-parent-caret {
  font-size: 1rem;
  opacity: 0.8;
  transition: transform 0.22s ease;
}

.nav-parent.open .nav-parent-caret {
  transform: rotate(180deg);
}

.nav-parent-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 320px;
  padding: 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(10,16,34,0.98), rgba(7,11,25,0.96));
  box-shadow: 0 24px 60px rgba(0,0,0,0.38), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  z-index: 1200;
}

.nav-parent.open .nav-parent-menu,
.nav-parent:hover .nav-parent-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-parent-menu::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(10,16,34,0.98);
  border-left: 1px solid rgba(255,255,255,0.08);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.nav-parent-item {
  display: block;
  padding: 14px 16px;
  border-radius: 16px;
  text-decoration: none;
  color: var(--text) !important;
  border: 1px solid transparent;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  margin-bottom: 8px;
}

.nav-parent-item:last-child {
  margin-bottom: 0;
}

.nav-parent-item:hover,
.nav-parent-item:focus-visible {
  background: linear-gradient(135deg, rgba(255,122,54,0.13), rgba(76,201,255,0.08));
  border-color: rgba(255,158,77,0.26);
  transform: translateY(-1px);
}

.nav-parent-item-title {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}

.nav-parent-item-text {
  display: block;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--muted);
}

.nav-parent-featured {
  background: linear-gradient(135deg, rgba(255,120,60,0.15), rgba(255,180,80,0.08));
}

body.light-mode .nav-parent-trigger {
  border-color: rgba(255,128,64,0.14);
  background: linear-gradient(135deg, rgba(255,148,84,0.14), rgba(91,195,255,0.10));
  box-shadow: 0 10px 24px rgba(244,136,56,0.10), inset 0 1px 0 rgba(255,255,255,0.65);
}

body.light-mode .nav-parent-kicker {
  color: #c86526;
}

body.light-mode .nav-parent-menu {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(245,247,252,0.96));
  border-color: rgba(20,30,60,0.08);
  box-shadow: 0 18px 48px rgba(32,54,86,0.14);
}

body.light-mode .nav-parent-menu::before {
  background: rgba(255,255,255,0.98);
  border-left-color: rgba(20,30,60,0.08);
  border-top-color: rgba(20,30,60,0.08);
}

body.light-mode .nav-parent-item {
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(244,247,255,0.94));
}

@media (max-width: 1160px) {
  #mainNav { gap: 12px; }
  #mainNav a { font-size: 0.95rem; }
  .nav-parent-trigger { padding: 8px 12px; }
  .nav-parent-title { font-size: 0.95rem; }
  .logo-container img, #logo { max-width: 160px; height: 31px; }
}

@media (max-width: 980px) {
  .app-header { flex-wrap: wrap; }
  .logo-container { order: 1; }
  .header-actions { order: 2; margin-left: auto; }
  #mainNav { order: 3; width: 100%; justify-content: flex-start; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
  .nav-parent-menu { left: 0; transform: translateX(0) translateY(8px); min-width: 100%; width: min(360px, calc(100vw - 32px)); }
  .nav-parent.open .nav-parent-menu, .nav-parent:hover .nav-parent-menu { transform: translateX(0) translateY(0); }
  .nav-parent-menu::before { left: 28px; transform: rotate(45deg); }
}

@media (max-width: 768px) {
  .logo-container img, #logo { height: 30px; max-width: 150px; }
  .header-actions { gap: 8px; }
  .chain-switcher { min-width: 180px; max-width: calc(100vw - 190px); }
  .nav-parent { width: 100%; }
  .nav-parent-trigger { width: calc(100% - 24px); margin: 0 12px; justify-content: space-between; }
  .nav-parent-menu { position: static; transform: none !important; width: calc(100% - 24px); min-width: 0; margin: 10px 12px 0; opacity: 1; visibility: visible; pointer-events: auto; display: none; }
  .nav-parent.open .nav-parent-menu { display: block; }
  .nav-parent:hover .nav-parent-menu { display: none; }
  .nav-parent-menu::before { display: none; }
}

@media (max-width: 560px) {
  .app-header { padding: 10px 12px; }
  .logo-container img, #logo { height: 28px; max-width: 138px; }
  .chain-switcher { min-width: 156px; max-width: calc(100vw - 156px); }
  .btn-connect { padding-inline: 10px; font-size: 0.84rem; }
}


/* ===== HEADER MOBILE STABILITY PATCH ===== */
.app-header {
  position: sticky;
  top: 0;
  overflow: visible;
}

#mainNav {
  overflow: visible;
}

.mobile-menu-toggle {
  touch-action: manipulation;
}

@media (max-width: 768px) {
  .app-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 12px;
    padding: 12px 14px;
  }

  .logo-container {
    min-width: 0;
  }

  .header-actions {
    width: min(100%, 230px);
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }

  .chain-switcher {
    order: 1;
    flex: 1 0 100%;
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .chain-switcher-trigger {
    min-height: 42px;
    padding: 8px 12px;
  }

  .chain-switcher-value {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  .btn-connect,
  .btn-theme,
  .btn-disconnect,
  .mobile-menu-toggle {
    min-height: 42px;
  }

  .btn-connect {
    order: 2;
    flex: 1 1 132px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .btn-theme { order: 3; }
  .btn-disconnect { order: 4; }
  .mobile-menu-toggle { order: 5; }

  #mainNav.nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 0 18px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 40px rgba(0,0,0,0.22);
    z-index: 1300;
  }

  #mainNav.nav.active {
    display: flex !important;
  }

  #mainNav > a,
  #mainNav > .nav-parent {
    width: 100%;
  }

  #mainNav > a {
    display: block;
    padding: 12px 16px;
    text-align: left;
  }

  .nav-parent-trigger {
    width: calc(100% - 24px);
    margin: 0 12px;
  }

  .nav-parent-menu {
    position: static;
    width: calc(100% - 24px);
    margin: 8px 12px 0;
  }
}

@media (max-width: 560px) {
  .app-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
  }

  .logo-container img,
  #logo {
    height: 28px;
    max-width: 132px;
  }

  .header-actions {
    width: min(100%, 210px);
  }

  .chain-switcher {
    width: 100%;
    max-width: 100%;
  }

  .chain-switcher-trigger {
    padding: 8px 10px;
  }

  .nav-parent-kicker {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
  }
}


/* ===== FINAL MOBILE MAPLEVERSE FIX ===== */
@media (max-width: 768px) {
  #mainNav.nav {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: 28px;
  }

  #mainNav > .nav-parent,
  #ecosystemMenu {
    display: block;
    width: 100%;
    overflow: visible;
  }

  #ecosystemMenuTrigger {
    width: calc(100% - 24px);
    margin: 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    touch-action: manipulation;
  }

  #ecosystemMenuPanel.nav-parent-menu {
    display: block !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: calc(100% - 24px) !important;
    min-width: 0 !important;
    margin: 0 12px !important;
    overflow: hidden !important;
    max-height: 0;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    border-width: 0;
    padding-top: 0;
    padding-bottom: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.2s ease, padding 0.2s ease, border-width 0.2s ease !important;
  }

  #ecosystemMenu.open > #ecosystemMenuPanel.nav-parent-menu {
    margin-top: 8px !important;
    padding-top: 10px;
    padding-bottom: 10px;
    border-width: 1px;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #ecosystemMenu:hover > #ecosystemMenuPanel.nav-parent-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #ecosystemMenu.open:hover > #ecosystemMenuPanel.nav-parent-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ===== MOBILE MAPLEVERSE TEXT WRAP FIX ===== */
@media (max-width: 768px) {
  #ecosystemMenuPanel .nav-parent-item {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  #ecosystemMenuPanel .nav-parent-item-title,
  #ecosystemMenuPanel .nav-parent-item-text {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;
  }

  #ecosystemMenuPanel .nav-parent-item-title {
    line-height: 1.2;
    margin-bottom: 8px;
  }

  #ecosystemMenuPanel .nav-parent-item-text {
    font-size: 0.95rem;
    line-height: 1.5;
  }
}


/* ===== AIONEX aggressive homepage spotlight ===== */
body.home-future .aionex-glow-banner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) max-content;
    align-items: center;
    gap: 22px;
    margin-bottom: 30px;
    padding: 20px 22px;
    border-radius: 24px;
    border: 1px solid rgba(255, 165, 96, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 118, 72, 0.16), rgba(14, 22, 44, 0.92) 46%, rgba(60, 202, 255, 0.14) 100%),
        linear-gradient(180deg, var(--hf-panel-2), var(--hf-panel));
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.26), 0 0 40px rgba(255, 123, 84, 0.08);
    position: relative;
    overflow: hidden;
}
body.home-future .aionex-glow-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.08), transparent 30%, transparent 70%, rgba(124,247,212,0.08));
    pointer-events: none;
}
body.home-future .banner-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #ffc08d;
}
body.home-future .aionex-banner-copy strong {
    display: block;
    color: var(--hf-text);
    font-size: clamp(1.1rem, 2.4vw, 1.55rem);
    line-height: 1.25;
    margin-bottom: 8px;
}
body.home-future .aionex-banner-copy p {
    color: var(--hf-muted);
    max-width: 860px;
    margin: 0;
}
body.home-future .aionex-banner-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
body.home-future .hero-innovation-ribbon {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 170, 98, 0.18);
    background: rgba(255,255,255,0.05);
    color: #ffe0c2;
    margin-bottom: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
body.home-future .hero-innovation-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffab5c, #ff6c43);
    box-shadow: 0 0 12px rgba(255, 122, 84, 0.55);
    animation: pulseGlow 2s ease-in-out infinite;
}
body.home-future .hero-title-aionex {
    max-width: 11.2ch;
}
body.home-future .hero-title-aionex .hero-title-accent {
    display: block;
    font-size: clamp(3.4rem, 7vw, 6.2rem);
    line-height: 0.9;
    text-shadow: 0 0 24px rgba(255, 137, 84, 0.12);
}
body.home-future .hero-dashboard {
    display: grid;
    gap: 18px;
}
body.home-future .aionex-launch-panel {
    border-radius: 28px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 130, 77, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(15, 23, 47, 0.96), rgba(10, 16, 35, 0.93));
}
body.home-future .aionex-launch-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255,255,255,0.06), transparent 32%, transparent 65%, rgba(85, 213, 255, 0.08));
    pointer-events: none;
}
body.home-future .launch-panel-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
}
body.home-future .launch-live {
    color: #ffe3c7;
    background: rgba(255, 126, 77, 0.14);
    border-color: rgba(255, 170, 92, 0.24);
}
body.home-future .launch-panel-copy {
    color: var(--hf-muted);
    margin: 14px 0 18px;
}
body.home-future .launch-pill-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
body.home-future .launch-pill-card {
    padding: 14px 15px;
    border-radius: 18px;
    border: 1px solid var(--hf-border);
    background: rgba(255,255,255,0.04);
}
body.home-future .launch-pill-card span {
    display: block;
    color: var(--hf-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}
body.home-future .launch-pill-card strong {
    color: var(--hf-text);
    display: block;
    font-size: 1rem;
}
body.home-future .aionex-launch-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}
body.home-future .aionex-launch-block {
    position: relative;
    padding: 18px 0 8px;
}
body.home-future .aionex-launch-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
    gap: 28px;
    align-items: center;
    padding: 32px;
    border-radius: 32px;
    border: 1px solid rgba(255, 165, 96, 0.18);
    background:
        radial-gradient(circle at 10% 10%, rgba(255, 120, 76, 0.18), transparent 24%),
        radial-gradient(circle at 90% 20%, rgba(124, 247, 212, 0.10), transparent 22%),
        linear-gradient(135deg, rgba(12, 18, 39, 0.98), rgba(7, 11, 24, 0.96));
    box-shadow: 0 28px 70px rgba(0,0,0,0.28);
    overflow: hidden;
    position: relative;
}
body.home-future .aionex-launch-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.05), transparent 30%, transparent 70%, rgba(124,247,212,0.06));
    pointer-events: none;
}
body.home-future .aionex-launch-copy p {
    color: var(--hf-muted);
    margin-bottom: 18px;
    max-width: 740px;
}
body.home-future .aionex-launch-visual {
    min-height: 400px;
    position: relative;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background:
        radial-gradient(circle at center, rgba(255, 124, 84, 0.20), transparent 24%),
        linear-gradient(180deg, rgba(9, 14, 28, 0.98), rgba(13, 19, 37, 0.92));
    border: 1px solid rgba(255,255,255,0.06);
    overflow: hidden;
}
body.home-future .launch-visual-core {
    position: relative;
    width: min(100%, 420px);
    height: 100%;
    min-height: 360px;
    display: grid;
    place-items: center;
}
body.home-future .launch-core-chip {
    position: relative;
    z-index: 2;
    width: min(250px, 72%);
    padding: 24px 20px;
    border-radius: 28px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 22px 50px rgba(0,0,0,0.34);
    backdrop-filter: blur(16px);
}
body.home-future .launch-core-kicker,
body.home-future .launch-core-chip small {
    display: block;
    color: var(--hf-muted);
}
body.home-future .launch-core-kicker {
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
}
body.home-future .launch-core-chip strong {
    display: block;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1;
    color: #fff4ea;
    margin-bottom: 10px;
}
body.home-future .launch-beam {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    transform-origin: center;
    background: linear-gradient(180deg, rgba(255, 177, 117, 0.04), rgba(255, 177, 117, 0.38), rgba(124, 247, 212, 0.06));
    box-shadow: 0 0 22px rgba(255, 132, 90, 0.12);
}
body.home-future .beam-a { height: 250px; transform: translate(-50%, -50%) rotate(18deg); }
body.home-future .beam-b { height: 280px; transform: translate(-50%, -50%) rotate(-32deg); }
body.home-future .beam-c { height: 230px; transform: translate(-50%, -50%) rotate(88deg); }
body.home-future .launch-node {
    position: absolute;
    z-index: 2;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(7, 14, 28, 0.88);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff4eb;
    font-size: 0.85rem;
    font-weight: 600;
    box-shadow: 0 14px 28px rgba(0,0,0,0.24);
    animation: launchPulse 4s ease-in-out infinite;
}
body.home-future .launch-node-a { top: 10%; left: 48%; transform: translateX(-50%); }
body.home-future .launch-node-b { right: 4%; top: 46%; }
body.home-future .launch-node-c { bottom: 10%; left: 46%; transform: translateX(-50%); }
body.home-future .launch-node-d { left: 2%; top: 46%; }
body.home-future.light-mode .aionex-glow-banner,
body.home-future.light-mode .aionex-launch-shell {
    box-shadow: 0 24px 58px rgba(35, 68, 120, 0.10);
}
body.home-future.light-mode .aionex-glow-banner {
    background:
        linear-gradient(135deg, rgba(255, 150, 98, 0.14), rgba(255, 255, 255, 0.95) 48%, rgba(101, 211, 255, 0.10) 100%),
        linear-gradient(180deg, var(--hf-panel-2), var(--hf-panel));
}
body.home-future.light-mode .hero-innovation-ribbon,
body.home-future.light-mode .launch-pill-card {
    background: rgba(16, 29, 56, 0.04);
}
body.home-future.light-mode .aionex-launch-panel,
body.home-future.light-mode .aionex-launch-visual {
    background:
        radial-gradient(circle at center, rgba(255, 145, 88, 0.10), transparent 26%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(242,247,255,0.94));
}
body.home-future.light-mode .launch-node,
body.home-future.light-mode .launch-core-chip strong {
    color: #192238;
}
body.home-future.light-mode .launch-node {
    background: rgba(255,255,255,0.92);
    border-color: rgba(255, 145, 92, 0.14);
}
@keyframes launchPulse {
    0%, 100% {
        opacity: 0.96;
        box-shadow: 0 14px 28px rgba(0,0,0,0.24), 0 0 0 rgba(255, 132, 90, 0.00);
    }
    50% {
        opacity: 1;
        box-shadow: 0 18px 34px rgba(0,0,0,0.28), 0 0 18px rgba(255, 132, 90, 0.18);
    }
}
@media (max-width: 1180px) {
    body.home-future .aionex-glow-banner,
    body.home-future .aionex-launch-shell {
        grid-template-columns: 1fr;
    }
    body.home-future .aionex-banner-actions {
        justify-content: flex-start;
    }
}
@media (max-width: 900px) {
    body.home-future .launch-pill-grid {
        grid-template-columns: 1fr;
    }
    body.home-future .aionex-launch-visual {
        min-height: 340px;
    }
}
@media (max-width: 640px) {
    body.home-future .aionex-glow-banner,
    body.home-future .aionex-launch-shell,
    body.home-future .aionex-launch-panel {
        padding: 20px;
        border-radius: 22px;
    }
    body.home-future .aionex-banner-actions,
    body.home-future .aionex-launch-actions {
        width: 100%;
    }
    body.home-future .aionex-banner-actions .btn,
    body.home-future .aionex-launch-actions .btn {
        width: 100%;
        justify-content: center;
    }
    body.home-future .aionex-launch-visual {
        min-height: 300px;
    }
    body.home-future .launch-node {
        font-size: 0.76rem;
        padding: 8px 10px;
    }
}

/* ===== AIONEX innovation highlight ===== */
.text-gradient-aionex {
    background: linear-gradient(90deg, #ff7b54 0%, #ffb36b 35%, #7cf7d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.aionex-innovation-strip {
    position: relative;
    padding: 34px 0 24px;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 116, 77, 0.18), transparent 28%),
        radial-gradient(circle at 88% 22%, rgba(102, 232, 203, 0.14), transparent 24%),
        linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
}
.aionex-innovation-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 26px;
    align-items: center;
    padding: 28px;
    border: 1px solid rgba(255, 158, 77, 0.16);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255, 107, 76, 0.12), rgba(22, 28, 53, 0.88) 52%, rgba(21, 89, 92, 0.32) 100%),
        var(--card);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.20);
    overflow: hidden;
    position: relative;
}
.aionex-innovation-shell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.06), transparent 32%, transparent 68%, rgba(124,247,212,0.06));
    pointer-events: none;
}
.aionex-kicker { color: #ffbb82; }
.aionex-innovation-copy p {
    max-width: 720px;
    color: var(--muted);
    margin-bottom: 18px;
}
.aionex-badge-row,
.aionex-cta-row,
.aionex-feature-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.aionex-badge {
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 184, 122, 0.22);
    background: rgba(255,255,255,0.05);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    backdrop-filter: blur(12px);
}
.aionex-cta-row { margin-top: 20px; }
.aionex-innovation-visual {
    position: relative;
    min-height: 360px;
    display: grid;
    place-items: center;
    border-radius: 26px;
    border: 1px solid rgba(255,255,255,0.08);
    background:
        radial-gradient(circle at center, rgba(255, 129, 92, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(8, 12, 22, 0.94), rgba(13, 18, 34, 0.88));
    overflow: hidden;
}
.aionex-orbit-core {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}
.aionex-orbit-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 190, 122, 0.22);
    box-shadow: 0 0 30px rgba(255, 122, 84, 0.10);
}
.aionex-orbit-ring.ring-one { width: 54%; height: 54%; }
.aionex-orbit-ring.ring-two { width: 74%; height: 74%; }
.aionex-orbit-ring.ring-three { width: 96%; height: 96%; }
.aionex-core-chip {
    position: relative;
    z-index: 2;
    width: min(230px, 68%);
    padding: 24px 20px;
    border-radius: 26px;
    text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 18px 36px rgba(0,0,0,0.30);
    backdrop-filter: blur(16px);
}
.aionex-core-kicker,
.aionex-core-chip small { display: block; color: var(--muted); }
.aionex-core-kicker {
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}
.aionex-core-chip strong {
    display: block;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1;
    margin-bottom: 10px;
    color: #fff2e8;
}
.aionex-node {
    position: absolute;
    z-index: 2;
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(8, 16, 31, 0.84);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff5eb;
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 12px 24px rgba(0,0,0,0.24);
}
.node-a { top: 8%; left: 50%; transform: translateX(-50%); }
.node-b { right: 0%; top: 48%; transform: translateY(-50%); }
.node-c { bottom: 4%; left: 50%; transform: translateX(-50%); }
.node-d { left: 0%; top: 48%; transform: translateY(-50%); }
.aionex-feature-grid { margin-top: 18px; }
.aionex-feature-card {
    flex: 1 1 220px;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.07);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
        var(--card);
}
.aionex-feature-card span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 124, 69, 0.18), rgba(124,247,212,0.12));
    color: #ffca99;
    font-weight: 700;
    margin-bottom: 14px;
}
.aionex-feature-card p { color: var(--muted); }
body.light-mode .aionex-innovation-shell {
    border-color: rgba(255, 145, 79, 0.18);
    background:
        linear-gradient(135deg, rgba(255, 144, 89, 0.14), rgba(255,255,255,0.95) 52%, rgba(134, 240, 211, 0.16) 100%),
        var(--card);
    box-shadow: 0 20px 50px rgba(255, 153, 87, 0.10);
}
body.light-mode .aionex-innovation-visual {
    background:
        radial-gradient(circle at center, rgba(255, 155, 92, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.86), rgba(245,248,252,0.96));
}
body.light-mode .aionex-node,
body.light-mode .aionex-core-chip strong { color: #1a1a25; }
body.light-mode .aionex-node {
    background: rgba(255,255,255,0.92);
    border-color: rgba(255, 150, 92, 0.18);
}
body.light-mode .aionex-badge {
    background: rgba(255,255,255,0.72);
    border-color: rgba(255, 155, 92, 0.22);
}
@media (max-width: 980px) {
    .aionex-innovation-shell { grid-template-columns: 1fr; padding: 24px; }
    .aionex-innovation-visual { min-height: 320px; }
}
@media (max-width: 640px) {
    .aionex-innovation-strip { padding-top: 26px; }
    .aionex-innovation-shell { padding: 20px; border-radius: 22px; }
    .aionex-cta-row .btn,
    .aionex-cta-row a { width: 100%; justify-content: center; text-align: center; }
    .aionex-innovation-visual { min-height: 280px; }
    .aionex-node { font-size: 0.8rem; padding: 8px 10px; }
}


/* =========================
   Base AI network spotlight
   ========================= */
.chain-ai-spotlight {
  position: sticky;
  top: 74px;
  z-index: 900;
  overflow: hidden;
  border-bottom: 1px solid rgba(80, 145, 255, 0.26);
  background:
    radial-gradient(circle at 7% 50%, rgba(0, 82, 255, 0.36), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(69, 214, 255, 0.22), transparent 34%),
    linear-gradient(105deg, rgba(5, 11, 28, 0.97), rgba(7, 25, 62, 0.96) 52%, rgba(3, 11, 30, 0.97));
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 60px rgba(0, 82, 255, 0.18);
}
.chain-ai-spotlight[hidden] { display: none !important; }
.chain-ai-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.11), transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 72px);
  transform: translateX(-55%);
  animation: baseSpotlightSweep 8s linear infinite;
}
@keyframes baseSpotlightSweep {
  0% { transform: translateX(-60%); opacity: 0.45; }
  60% { opacity: 0.85; }
  100% { transform: translateX(60%); opacity: 0.35; }
}
.chain-ai-spotlight-inner {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
}
.chain-ai-orb {
  width: 46px;
  height: 46px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(0,82,255,0.98), rgba(69,214,255,0.72));
  box-shadow: 0 0 0 1px rgba(255,255,255,0.20) inset, 0 16px 34px rgba(0,82,255,0.30);
}
.chain-ai-orb span {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.92);
  box-shadow: 0 0 22px rgba(255,255,255,0.88);
}
.chain-ai-copy { display: grid; gap: 4px; min-width: 0; }
.chain-ai-kicker {
  color: #89b5ff;
  font-size: 0.72rem;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.chain-ai-copy strong {
  color: #ffffff;
  font-size: clamp(1.02rem, 1.55vw, 1.34rem);
  letter-spacing: -0.025em;
}
.chain-ai-copy p {
  color: rgba(232, 240, 255, 0.86);
  margin: 0;
  max-width: 820px;
  line-height: 1.45;
  font-size: 0.91rem;
}
.chain-ai-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; }
.chain-ai-pills span {
  border: 1px solid rgba(130, 180, 255, 0.38);
  background: rgba(255,255,255,0.08);
  color: #eaf2ff;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.72rem;
  font-weight: 850;
}
.chain-ai-actions { display: flex; gap: 10px; flex-shrink: 0; }
body.maplefi-chain-baseSepolia .chain-switcher-trigger,
.chain-option.is-base-option.is-selected {
  border-color: rgba(0, 82, 255, 0.62) !important;
  box-shadow: 0 0 0 1px rgba(0, 82, 255, 0.20), 0 14px 36px rgba(0, 82, 255, 0.22) !important;
}
body.maplefi-chain-baseSepolia .chain-switcher-value::after {
  content: " • AI LIVE";
  color: #76a7ff;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.chain-option.is-base-option .chain-option-title::after {
  content: "  ★";
  color: #76a7ff;
}
body.maplefi-chain-baseSepolia .hero-premium::before,
body.maplefi-chain-baseSepolia .dashboard-panel::before {
  border-color: rgba(0, 82, 255, 0.26);
}
body.maplefi-chain-baseSepolia .status-badge,
body.maplefi-chain-baseSepolia .launch-live {
  background: linear-gradient(135deg, rgba(0,82,255,0.24), rgba(69,214,255,0.18));
  border-color: rgba(94, 160, 255, 0.34);
  color: #e7f0ff;
}
.base-inline-narrative {
  margin-top: 22px;
  padding: 16px 18px;
  border-left: 3px solid rgba(0,82,255,0.82);
  border-radius: 0 18px 18px 0;
  background: linear-gradient(90deg, rgba(0,82,255,0.12), rgba(69,214,255,0.05), transparent);
}
.base-inline-narrative span {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--accent, #76a7ff);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}
.base-inline-narrative p { margin: 0; color: var(--text-secondary, rgba(222,232,255,0.82)); line-height: 1.6; }
.chain-future-prose {
  max-width: 980px;
  margin: 0 auto;
}
.chain-prose-highlight {
  margin-top: 18px !important;
  padding: 18px 20px;
  border-radius: 22px;
  border: 1px solid rgba(0,82,255,0.20);
  background: linear-gradient(135deg, rgba(0,82,255,0.11), rgba(69,214,255,0.06));
}
body.light-mode .chain-ai-spotlight {
  background:
    radial-gradient(circle at 7% 50%, rgba(0,82,255,0.20), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(42,178,255,0.18), transparent 34%),
    linear-gradient(105deg, rgba(246,249,255,0.96), rgba(232,240,255,0.96) 52%, rgba(247,250,255,0.98));
  border-bottom-color: rgba(0,82,255,0.18);
}
body.light-mode .chain-ai-copy strong { color: #0d1b38; }
body.light-mode .chain-ai-copy p { color: rgba(18, 34, 64, 0.78); }
body.light-mode .chain-ai-pills span { background: rgba(0,82,255,0.07); color: #143a85; border-color: rgba(0,82,255,0.18); }
body.light-mode .base-inline-narrative p { color: #34425f; }
@media (max-width: 900px) {
  .chain-ai-spotlight { top: 68px; }
  .chain-ai-spotlight-inner { grid-template-columns: auto 1fr; align-items: flex-start; padding: 12px 0 14px; }
  .chain-ai-actions { grid-column: 1 / -1; width: 100%; flex-wrap: wrap; }
  .chain-ai-actions .btn { flex: 1 1 170px; justify-content: center; }
}
@media (max-width: 560px) {
  .chain-ai-spotlight-inner { width: min(100% - 20px, 1180px); grid-template-columns: 1fr; }
  .chain-ai-orb { display: none; }
  .chain-ai-copy p { font-size: 0.84rem; }
}


/* ===== INDEX POLISH: remove global chain banner from homepage + Base execution rail ===== */
body.home-future #chainSpotlight,
body.home-future .chain-ai-spotlight {
  display: none !important;
}

body.home-future .base-flow-strip {
  padding: 30px 0 54px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 50%, rgba(0, 82, 255, 0.18), transparent 28%),
    linear-gradient(180deg, rgba(6, 10, 24, 0.08), rgba(8, 11, 25, 0.58));
}

body.home-future .base-flow-line {
  position: relative;
  padding: 24px 0 8px;
}

body.home-future .flow-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  color: #74d8ff;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

body.home-future .flow-kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #0052ff;
  box-shadow: 0 0 0 6px rgba(0,82,255,0.18), 0 0 24px rgba(69,214,255,0.6);
}

body.home-future .flow-track {
  position: relative;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,0.08), rgba(69,214,255,0.25), rgba(255,122,54,0.18));
}

body.home-future .flow-track span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #45d6ff, #ff7a36, transparent);
  animation: mapleBaseFlow 3.8s ease-in-out infinite;
}

@keyframes mapleBaseFlow {
  from { transform: translateX(-105%); }
  to { transform: translateX(305%); }
}

body.home-future .flow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

body.home-future .flow-steps div {
  min-width: 0;
  padding: 0 10px 0 0;
}

body.home-future .flow-steps strong {
  display: block;
  color: #ff9d62;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}

body.home-future .flow-steps span {
  display: block;
  color: var(--hf-text);
  font-weight: 700;
  line-height: 1.35;
}

body.home-future.light-mode .base-flow-strip {
  background:
    radial-gradient(circle at 20% 50%, rgba(0, 82, 255, 0.10), transparent 28%),
    linear-gradient(180deg, rgba(247,250,255,0.55), rgba(255,255,255,0.92));
}
body.home-future.light-mode .flow-steps span { color: #17233d; }

/* Homepage mobile layout hardening from attached 299px capture */
@media (max-width: 520px) {
  body.home-future { overflow-x: hidden; }
  .app-header {
    grid-template-columns: 1fr !important;
    justify-items: stretch;
    padding: 10px 12px !important;
  }
  .logo-container { justify-self: center; }
  .header-actions {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: stretch !important;
    gap: 8px !important;
  }
  .chain-switcher { flex: 1 1 100% !important; width: 100% !important; }
  .btn-connect { flex: 1 1 auto !important; }
  .btn-theme, .mobile-menu-toggle, .btn-disconnect { flex: 0 0 auto !important; }
  body.home-future .container { width: 100%; padding-left: 15px; padding-right: 15px; }
  body.home-future .hero-premium { padding-top: 42px; }
  body.home-future .aionex-glow-banner,
  body.home-future .aionex-launch-shell,
  body.home-future .aionex-innovation-shell {
    grid-template-columns: 1fr !important;
    padding: 18px !important;
  }
  body.home-future .aionex-banner-actions,
  body.home-future .aionex-cta-row,
  body.home-future .aionex-launch-actions { width: 100%; }
  body.home-future .hero-title {
    font-size: clamp(2.15rem, 13vw, 3.35rem) !important;
    max-width: 100% !important;
    line-height: 1.02 !important;
  }
  body.home-future .hero-title-aionex .hero-title-rest { font-size: 0.76em; }
  body.home-future .hero-subtitle { font-size: 0.98rem; line-height: 1.72; }
  body.home-future .hero-dashboard { max-width: 100%; }
  body.home-future .dashboard-panel,
  body.home-future .aionex-launch-panel { padding: 16px !important; }
  body.home-future .panel-metric-grid,
  body.home-future .launch-pill-grid,
  body.home-future .hero-command-strip { grid-template-columns: 1fr !important; }
  body.home-future .terminal-rows div { grid-template-columns: 1fr; gap: 3px; }
  body.home-future .flow-steps { grid-template-columns: 1fr; gap: 16px; }
  body.home-future .base-flow-strip { padding: 18px 0 38px; }
}

@media (min-width: 521px) and (max-width: 900px) {
  body.home-future .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  body.home-future .flow-track span { animation: none; transform: none; width: 100%; opacity: 0.55; }
}

/* ===== INDEX LAYOUT CLEANUP 2026-05-10 =====
   Fixes reported homepage overlap, over-dense hero cards, and header crowding.
*/
body.home-future .hero-premium {
  padding: clamp(46px, 6vw, 82px) 0 clamp(46px, 6vw, 70px);
  min-height: auto;
}

body.home-future .hero-shell {
  grid-template-columns: minmax(0, 1.06fr) minmax(330px, 0.82fr);
  align-items: start;
  gap: clamp(26px, 4vw, 48px);
}

body.home-future .hero-dashboard {
  align-self: start;
  position: sticky;
  top: 102px;
  max-width: 470px;
  justify-self: end;
}

body.home-future .dashboard-panel {
  overflow: hidden;
}

body.home-future .hero-title {
  max-width: 12.5ch;
  font-size: clamp(2.65rem, 6vw, 5.15rem);
}

body.home-future .hero-title-aionex .hero-title-rest {
  font-size: 0.82em;
  line-height: 1.05;
}

body.home-future .hero-cta-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
}

body.home-future .hero-eyebrow-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
}

body.home-future .aionex-glow-banner,
body.home-future .aionex-launch-panel {
  display: none !important;
}

body.home-future .base-inline-narrative {
  position: relative;
  overflow: hidden;
}

body.home-future .base-inline-narrative::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -40%;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: skewX(-18deg);
  animation: mapleInlineSweep 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mapleInlineSweep {
  0%, 24% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  36% { opacity: 1; }
  72%, 100% { transform: translateX(420%) skewX(-18deg); opacity: 0; }
}

body.home-future .base-flow-strip {
  padding: clamp(34px, 5vw, 64px) 0 clamp(44px, 6vw, 76px);
  background:
    radial-gradient(circle at 18% 22%, rgba(0,82,255,0.20), transparent 30%),
    radial-gradient(circle at 86% 70%, rgba(255,122,54,0.14), transparent 32%),
    linear-gradient(180deg, rgba(8,12,27,0.35), rgba(11,16,34,0.84));
}

body.home-future .base-flow-line {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(260px, 0.72fr);
  grid-template-areas:
    "copy visual"
    "steps steps";
  gap: 24px 34px;
  align-items: center;
  padding: 28px;
  border-radius: 30px;
  border: 1px solid rgba(125, 177, 255, 0.16);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02)),
    rgba(8,13,29,0.58);
  box-shadow: 0 24px 70px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(16px);
}

body.home-future .flow-copy { grid-area: copy; }
body.home-future .flow-copy h2 {
  max-width: 680px;
  margin: 0 0 10px;
  font-size: clamp(1.45rem, 3.2vw, 2.45rem);
  line-height: 1.08;
}
body.home-future .flow-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--hf-muted);
  line-height: 1.7;
}

body.home-future .flow-visual {
  grid-area: visual;
  position: relative;
  min-height: 150px;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at center, rgba(69,214,255,0.18), transparent 40%),
    linear-gradient(135deg, rgba(0,82,255,0.18), rgba(255,122,54,0.08));
}

body.home-future .flow-orb {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #45d6ff;
  box-shadow: 0 0 0 8px rgba(69,214,255,0.10), 0 0 34px rgba(69,214,255,0.66);
  animation: mapleOrbPulse 3.2s ease-in-out infinite;
}
body.home-future .flow-orb-a { left: 15%; top: 34%; }
body.home-future .flow-orb-b { left: 50%; top: 62%; animation-delay: 0.45s; background: #ff9d62; box-shadow: 0 0 0 8px rgba(255,157,98,0.10), 0 0 34px rgba(255,157,98,0.55); }
body.home-future .flow-orb-c { right: 15%; top: 28%; animation-delay: 0.9s; }
@keyframes mapleOrbPulse { 50% { transform: scale(1.25); filter: brightness(1.22); } }

body.home-future .flow-visual .flow-track {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 50%;
  height: 3px;
  transform: translateY(-50%);
}

body.home-future .flow-steps {
  grid-area: steps;
  margin-top: 4px;
}

body.home-future .flow-steps div {
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.035);
}

body.home-future.light-mode .base-flow-line {
  background: rgba(255,255,255,0.78);
  border-color: rgba(0,82,255,0.14);
  box-shadow: 0 18px 46px rgba(37, 66, 120, 0.11);
}
body.home-future.light-mode .flow-copy p { color: #51607c; }
body.home-future.light-mode .flow-steps div { background: rgba(255,255,255,0.68); border-color: rgba(0,82,255,0.10); }

/* Header crowding fix: collapse full nav before it can overlap the chain selector. */
@media (max-width: 1280px) {
  .app-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 14px;
    align-items: center;
  }
  #mainNav.nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: none !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px 0 18px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 16px 40px rgba(0,0,0,0.24);
    z-index: 1300;
  }
  #mainNav.nav.active { display: flex !important; }
  #mainNav > a { display: block; width: auto; margin: 0 12px; padding: 11px 14px; border-radius: 12px; text-align: left; }
  #mainNav > .nav-parent { width: 100%; }
  .mobile-menu-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
  .header-actions { justify-self: end; min-width: 0; flex-wrap: nowrap; }
  .chain-switcher { min-width: 210px; }
}

@media (min-width: 1281px) {
  .mobile-menu-toggle { display: none !important; }
}

@media (max-width: 1040px) {
  body.home-future .hero-shell {
    grid-template-columns: 1fr;
  }
  body.home-future .hero-dashboard {
    position: relative;
    top: auto;
    max-width: 100%;
    justify-self: stretch;
  }
  body.home-future .dashboard-panel { max-width: 760px; margin: 0 auto; }
  body.home-future .base-flow-line {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "visual" "steps";
  }
}

@media (max-width: 640px) {
  body.home-future .hero-premium { padding-top: 34px !important; }
  body.home-future .hero-shell { gap: 24px; }
  body.home-future .hero-brand-mark { align-items: flex-start; gap: 12px; }
  body.home-future .logo-core-wrap { width: 78px; height: 78px; flex: 0 0 78px; }
  body.home-future .premium-logo { width: 54px !important; height: 54px !important; }
  body.home-future .brand-signal strong { font-size: 0.98rem; }
  body.home-future .brand-signal span { font-size: 0.66rem; letter-spacing: 0.13em; }
  body.home-future .hero-title { font-size: clamp(2.2rem, 11.5vw, 3.1rem) !important; }
  body.home-future .hero-subtitle { font-size: 0.95rem !important; line-height: 1.65 !important; }
  body.home-future .hero-cta-row .btn { flex: 1 1 100%; justify-content: center; }
  body.home-future .base-inline-narrative { padding: 14px 15px; border-radius: 16px; }
  body.home-future .panel-topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  body.home-future .metric-card,
  body.home-future .terminal-card { padding: 14px; }
  body.home-future .terminal-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  body.home-future .base-flow-line { padding: 18px; border-radius: 24px; }
  body.home-future .flow-visual { min-height: 120px; }
  body.home-future .flow-steps div { padding: 14px; }
}

@media (max-width: 420px) {
  .app-header { padding: 9px 10px !important; }
  .logo-container img, #logo { height: 25px !important; max-width: 118px !important; }
  .header-actions { gap: 6px !important; }
  .chain-switcher { min-width: 0 !important; flex: 1 1 100% !important; }
  .chain-switcher-trigger { min-height: 40px; padding: 7px 9px; }
  body.maplefi-chain-baseSepolia .chain-switcher-value::after { content: ""; }
  .btn-connect { min-width: 0; padding-left: 10px; padding-right: 10px; }
  .btn-theme, .btn-disconnect, .mobile-menu-toggle { min-width: 40px; padding-left: 9px; padding-right: 9px; }
  body.home-future .container { padding-left: 13px !important; padding-right: 13px !important; }
  body.home-future .pill { font-size: 0.66rem; letter-spacing: 0.08em; padding: 7px 9px; }
  body.home-future .panel-metric-grid { gap: 10px; }
  body.home-future .terminal-rows div strong { overflow-wrap: anywhere; }
}

/* ===== HEADER MOBILE HARD FIX 2026-05-11 =====
   Prevents desktop nav links (Home/Dashboard/etc.) from wrapping under/over the MapleFi logo.
   The full nav is hidden below laptop width and only opens as a dropdown from the menu button.
*/
@media (max-width: 1280px) {
  header.app-header {
    position: sticky !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "brand actions" !important;
    align-items: center !important;
    gap: 10px 12px !important;
    overflow: visible !important;
  }

  header.app-header .logo-container {
    grid-area: brand !important;
    justify-self: start !important;
    align-self: center !important;
    min-width: 0 !important;
    max-width: 132px !important;
    z-index: 2 !important;
  }

  header.app-header .logo-container img {
    width: auto !important;
    height: 30px !important;
    max-width: 126px !important;
    object-fit: contain !important;
  }

  header.app-header .header-actions {
    grid-area: actions !important;
    justify-self: end !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    z-index: 2 !important;
  }

  header.app-header nav#mainNav.nav,
  header.app-header nav#mainNav.nav:not(.active) {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 14px 12px 18px !important;
    margin: 0 !important;
    max-height: calc(100vh - 78px) !important;
    overflow-y: auto !important;
    background: var(--card) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28) !important;
    z-index: 1400 !important;
    pointer-events: none !important;
  }

  header.app-header nav#mainNav.nav.active,
  body.mobile-nav-open header.app-header nav#mainNav.nav.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  header.app-header nav#mainNav.nav > a,
  header.app-header nav#mainNav.nav > .nav-parent {
    width: 100% !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  header.app-header nav#mainNav.nav > a {
    display: block !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    text-align: left !important;
    background: rgba(255,255,255,0.025) !important;
  }

  header.app-header .mobile-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    background: rgba(255,255,255,0.05) !important;
    color: var(--text) !important;
    line-height: 1 !important;
  }
}

@media (min-width: 1281px) {
  header.app-header nav#mainNav.nav {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  header.app-header .mobile-menu-toggle { display: none !important; }
}

@media (max-width: 720px) {
  header.app-header {
    grid-template-columns: auto minmax(0, 1fr) !important;
    padding: 10px 12px !important;
  }

  header.app-header .header-actions {
    flex-wrap: wrap !important;
    row-gap: 7px !important;
  }

  header.app-header .chain-switcher {
    order: 1 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  header.app-header .btn-connect {
    order: 2 !important;
    flex: 1 1 116px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  header.app-header .btn-theme { order: 3 !important; }
  header.app-header .btn-disconnect { order: 4 !important; }
  header.app-header .mobile-menu-toggle { order: 5 !important; }
}

@media (max-width: 420px) {
  header.app-header {
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  header.app-header .logo-container {
    max-width: 104px !important;
  }

  header.app-header .logo-container img {
    height: 25px !important;
    max-width: 102px !important;
  }

  header.app-header .header-actions {
    gap: 6px !important;
  }

  header.app-header .chain-switcher-trigger {
    min-height: 38px !important;
    padding: 7px 9px !important;
  }

  header.app-header .btn-theme,
  header.app-header .btn-disconnect,
  header.app-header .mobile-menu-toggle {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  header.app-header .btn-connect {
    min-height: 38px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 0.8rem !important;
  }
}

/* ===== FINAL HEADER + INDEX BALANCE FIX 2026-05-11 ===== */
@media (min-width: 1281px) {
  header.app-header {
    display: grid !important;
    grid-template-columns: 176px minmax(510px, max-content) minmax(0, 1fr) !important;
    grid-template-areas: "brand nav actions" !important;
    align-items: center !important;
    justify-content: initial !important;
    column-gap: 22px !important;
    padding: 14px 24px !important;
    overflow: visible !important;
  }

  header.app-header .logo-container {
    grid-area: brand !important;
    width: 176px !important;
    min-width: 176px !important;
    max-width: 176px !important;
    flex: 0 0 176px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }

  header.app-header .logo-container img,
  header.app-header .logo-container #logo {
    width: 154px !important;
    max-width: 154px !important;
    min-width: 154px !important;
    height: auto !important;
    max-height: 42px !important;
    object-fit: contain !important;
    display: block !important;
  }

  header.app-header nav#mainNav.nav {
    grid-area: nav !important;
    display: flex !important;
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: clamp(12px, 1vw, 20px) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  header.app-header nav#mainNav.nav > a {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  header.app-header nav#mainNav.nav > .nav-parent {
    width: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
  }

  header.app-header .header-actions {
    grid-area: actions !important;
    justify-self: end !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  header.app-header .chain-switcher {
    flex: 0 1 380px !important;
    min-width: 260px !important;
    max-width: 380px !important;
  }

  header.app-header .btn-connect {
    flex: 0 1 300px !important;
    min-width: 170px !important;
    max-width: 300px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  header.app-header .btn-theme,
  header.app-header .btn-disconnect {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 1560px) and (min-width: 1281px) {
  header.app-header {
    grid-template-columns: 168px minmax(0, 1fr) !important;
    grid-template-areas: "brand actions" !important;
  }
  header.app-header nav#mainNav.nav,
  header.app-header nav#mainNav.nav:not(.active) {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-6px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 14px 12px 18px !important;
    background: var(--card) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,0.28) !important;
    z-index: 1400 !important;
    pointer-events: none !important;
  }
  header.app-header nav#mainNav.nav.active,
  body.mobile-nav-open header.app-header nav#mainNav.nav.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
  header.app-header nav#mainNav.nav > a,
  header.app-header nav#mainNav.nav > .nav-parent {
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.025) !important;
  }
  header.app-header .mobile-menu-toggle { display: inline-flex !important; }
}

body.home-future .chain-future-prose {
  max-width: 1180px;
}

body.home-future .chain-future-layout.chain-future-prose {
  grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

body.home-future .chain-future-visual {
  position: relative;
  min-height: 430px;
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(95, 167, 255, 0.18);
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 82, 255, 0.28), transparent 31%),
    radial-gradient(circle at 85% 18%, rgba(255, 131, 67, 0.18), transparent 26%),
    linear-gradient(145deg, rgba(12, 20, 43, 0.92), rgba(5, 9, 23, 0.96));
  box-shadow: 0 28px 80px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.05);
}

body.home-future .chain-future-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
  opacity: 0.48;
}

body.home-future .evm-orbit-card {
  position: absolute;
  inset: 28px;
}

body.home-future .evm-orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(120, 186, 255, 0.22);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: mapleOrbitSpin 18s linear infinite;
}
body.home-future .ring-one { width: 190px; height: 190px; }
body.home-future .ring-two { width: 280px; height: 280px; animation-duration: 24s; animation-direction: reverse; }
body.home-future .ring-three { width: 360px; height: 360px; animation-duration: 32s; opacity: 0.72; }

body.home-future .evm-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 190px;
  min-height: 190px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: radial-gradient(circle at 35% 18%, rgba(255,255,255,0.13), transparent 32%), rgba(4, 9, 24, 0.74);
  box-shadow: 0 0 44px rgba(0, 82, 255, 0.24), inset 0 1px 0 rgba(255,255,255,0.08);
}
body.home-future .evm-core span { font-size: 0.64rem; letter-spacing: 0.20em; color: #ffb280; text-transform: uppercase; }
body.home-future .evm-core strong { margin-top: 8px; font-size: 1.4rem; color: #fff; }
body.home-future .evm-core small { margin-top: 7px; color: rgba(221,232,255,0.70); }

body.home-future .evm-node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(8, 14, 31, 0.82);
  box-shadow: 0 12px 30px rgba(0,0,0,0.24);
  backdrop-filter: blur(12px);
  animation: nodeFloat 5s ease-in-out infinite;
}
body.home-future .evm-node b { color: #ff9559; font-size: 0.82rem; }
body.home-future .evm-node span { color: rgba(234,240,255,0.88); font-size: 0.86rem; white-space: nowrap; }
body.home-future .node-a { left: 4%; top: 18%; }
body.home-future .node-b { right: 4%; top: 24%; animation-delay: -1.2s; }
body.home-future .node-c { left: 6%; bottom: 20%; animation-delay: -2.2s; }
body.home-future .node-d { right: 6%; bottom: 16%; animation-delay: -3.1s; }

body.home-future .chain-future-pulsebar {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(3, 8, 20, 0.58);
  backdrop-filter: blur(14px);
}
body.home-future .chain-future-pulsebar span { color: rgba(222,232,255,0.72); font-size: 0.86rem; }
body.home-future .chain-future-pulsebar strong { color: #fff; }

@keyframes mapleOrbitSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes nodeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

body.home-future.light-mode .chain-future-visual {
  background:
    radial-gradient(circle at 50% 45%, rgba(0, 82, 255, 0.18), transparent 31%),
    radial-gradient(circle at 85% 18%, rgba(255, 131, 67, 0.16), transparent 26%),
    linear-gradient(145deg, rgba(245, 249, 255, 0.94), rgba(232, 239, 252, 0.94));
  border-color: rgba(0, 82, 255, 0.16);
  box-shadow: 0 24px 70px rgba(43, 76, 130, 0.18), inset 0 1px 0 rgba(255,255,255,0.72);
}
body.home-future.light-mode .evm-core { background: rgba(255,255,255,0.72); border-color: rgba(0,82,255,0.16); }
body.home-future.light-mode .evm-core strong { color: #0f1b36; }
body.home-future.light-mode .evm-core small { color: #566684; }
body.home-future.light-mode .evm-node { background: rgba(255,255,255,0.82); border-color: rgba(0,82,255,0.12); }
body.home-future.light-mode .evm-node span { color: #25334f; }
body.home-future.light-mode .chain-future-pulsebar { background: rgba(255,255,255,0.72); border-color: rgba(0,82,255,0.12); }
body.home-future.light-mode .chain-future-pulsebar span { color: #50617e; }
body.home-future.light-mode .chain-future-pulsebar strong { color: #11203d; }

@media (max-width: 1040px) {
  body.home-future .chain-future-layout.chain-future-prose {
    grid-template-columns: 1fr;
  }
  body.home-future .chain-future-visual {
    min-height: 380px;
  }
}

@media (max-width: 560px) {
  body.home-future .chain-future-visual {
    min-height: 420px;
    border-radius: 26px;
  }
  body.home-future .evm-orbit-card { inset: 18px; }
  body.home-future .ring-three { width: 300px; height: 300px; }
  body.home-future .ring-two { width: 230px; height: 230px; }
  body.home-future .ring-one { width: 165px; height: 165px; }
  body.home-future .evm-core { width: 156px; min-height: 156px; }
  body.home-future .evm-core strong { font-size: 1.08rem; }
  body.home-future .evm-node { padding: 8px 10px; }
  body.home-future .evm-node span { font-size: 0.76rem; }
  body.home-future .node-a { left: 0; top: 12%; }
  body.home-future .node-b { right: 0; top: 18%; }
  body.home-future .node-c { left: 0; bottom: 24%; }
  body.home-future .node-d { right: 0; bottom: 20%; }
  body.home-future .chain-future-pulsebar {
    left: 16px;
    right: 16px;
    bottom: 16px;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===== FINAL RESPONSIVE HEADER + EXPANSION VISUAL POLISH 2026-05-11 =====
   Keeps the desktop navigation on one compact row, prevents Home from ever
   slipping under the MapleFi logo, and replaces the overlapping orbit graphic
   with a clean, card-based Base/AIONEX execution visual. */

@media (min-width: 1181px) {
  header.app-header {
    display: grid !important;
    grid-template-columns: 178px max-content minmax(520px, 1fr) !important;
    grid-template-areas: "brand nav actions" !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 12px 22px !important;
    min-height: 72px !important;
    overflow: visible !important;
  }

  header.app-header .logo-container {
    grid-area: brand !important;
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
    flex: 0 0 178px !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 3 !important;
  }

  header.app-header .logo-container img,
  header.app-header .logo-container #logo {
    width: 136px !important;
    min-width: 136px !important;
    max-width: 136px !important;
    height: auto !important;
    max-height: 38px !important;
    object-fit: contain !important;
    display: block !important;
  }

  header.app-header nav#mainNav.nav,
  header.app-header nav#mainNav.nav:not(.active) {
    grid-area: nav !important;
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(9px, 0.72vw, 15px) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  header.app-header nav#mainNav.nav > a {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
    font-size: clamp(0.76rem, 0.55vw + 0.28rem, 0.91rem) !important;
    letter-spacing: 0.01em !important;
  }

  header.app-header nav#mainNav.nav > .nav-parent {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
  }

  header.app-header .nav-parent-trigger {
    min-height: 42px !important;
    padding: 8px 13px !important;
    gap: 9px !important;
    border-radius: 16px !important;
  }

  header.app-header .nav-parent-kicker {
    font-size: 0.58rem !important;
    letter-spacing: 0.18em !important;
  }

  header.app-header .nav-parent-title {
    font-size: 0.88rem !important;
    white-space: nowrap !important;
  }

  header.app-header .header-actions {
    grid-area: actions !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 9px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  header.app-header .chain-switcher {
    flex: 0 1 330px !important;
    min-width: 230px !important;
    max-width: 330px !important;
  }

  header.app-header .chain-switcher-trigger {
    min-height: 42px !important;
    padding: 8px 14px !important;
    gap: 8px !important;
  }

  header.app-header .chain-switcher-value {
    font-size: 0.82rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  header.app-header .btn-connect {
    flex: 0 1 230px !important;
    min-width: 136px !important;
    max-width: 230px !important;
    min-height: 42px !important;
    padding: 8px 13px !important;
    font-size: 0.82rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  header.app-header .btn-theme,
  header.app-header .btn-disconnect,
  header.app-header .mobile-menu-toggle {
    min-height: 42px !important;
    height: 42px !important;
  }

  header.app-header .btn-theme {
    min-width: 48px !important;
    width: 48px !important;
    padding: 0 !important;
  }

  header.app-header .btn-disconnect {
    min-width: 96px !important;
    padding: 8px 13px !important;
    font-size: 0.82rem !important;
  }

  header.app-header .mobile-menu-toggle {
    display: none !important;
  }
}

@media (min-width: 1181px) and (max-width: 1480px) {
  header.app-header {
    grid-template-columns: 146px max-content minmax(430px, 1fr) !important;
    gap: 10px !important;
    padding-inline: 16px !important;
  }

  header.app-header .logo-container {
    width: 146px !important;
    min-width: 146px !important;
    max-width: 146px !important;
  }

  header.app-header .logo-container img,
  header.app-header .logo-container #logo {
    width: 118px !important;
    min-width: 118px !important;
    max-width: 118px !important;
  }

  header.app-header nav#mainNav.nav { gap: 8px !important; }
  header.app-header nav#mainNav.nav > a { font-size: 0.76rem !important; }
  header.app-header .nav-parent-trigger { padding-inline: 10px !important; }
  header.app-header .nav-parent-title { font-size: 0.78rem !important; }
  header.app-header .chain-switcher { min-width: 205px !important; max-width: 280px !important; }
  header.app-header .btn-connect { min-width: 126px !important; max-width: 184px !important; }
  header.app-header .btn-disconnect { min-width: 86px !important; }
}

@media (max-width: 1180px) {
  header.app-header {
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    grid-template-areas: "brand actions" !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 72px !important;
    padding: 12px 16px !important;
    overflow: visible !important;
  }

  header.app-header .logo-container {
    grid-area: brand !important;
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    overflow: hidden !important;
  }

  header.app-header .logo-container img,
  header.app-header .logo-container #logo {
    width: 122px !important;
    min-width: 122px !important;
    max-width: 122px !important;
  }

  header.app-header .header-actions {
    grid-area: actions !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }

  header.app-header nav#mainNav.nav,
  header.app-header nav#mainNav.nav:not(.active) {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100vh - 92px) !important;
    overflow-y: auto !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 7px !important;
    padding: 12px !important;
    background: rgba(15, 17, 30, 0.97) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0 0 22px 22px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.34) !important;
    backdrop-filter: blur(18px) !important;
    z-index: 2400 !important;
  }

  header.app-header nav#mainNav.nav.active,
  body.mobile-nav-open header.app-header nav#mainNav.nav.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  header.app-header nav#mainNav.nav > a,
  header.app-header nav#mainNav.nav > .nav-parent {
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.035) !important;
  }

  header.app-header .mobile-menu-toggle {
    display: inline-flex !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }
}

@media (max-width: 720px) {
  header.app-header {
    grid-template-columns: 128px minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  header.app-header .logo-container {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
  }
  header.app-header .logo-container img,
  header.app-header .logo-container #logo {
    width: 106px !important;
    min-width: 106px !important;
    max-width: 106px !important;
  }
  header.app-header .chain-switcher {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: min(100%, 180px) !important;
    max-width: 100% !important;
  }
  header.app-header .header-actions {
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
  }
}

/* Non-overlapping AIONEX/Base visual */
body.home-future .chain-future-layout.chain-future-prose {
  grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr) !important;
  align-items: center !important;
  gap: clamp(30px, 5vw, 76px) !important;
}

body.home-future .chain-future-visual {
  min-height: 0 !important;
  padding: clamp(24px, 3vw, 38px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

body.home-future .evm-orbit-card {
  position: relative !important;
  inset: auto !important;
  min-height: 346px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: auto 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  z-index: 1 !important;
}

body.home-future .evm-orbit-ring {
  z-index: 0 !important;
  opacity: 0.54 !important;
  pointer-events: none !important;
}

body.home-future .ring-one { width: 180px !important; height: 180px !important; }
body.home-future .ring-two { width: 276px !important; height: 276px !important; }
body.home-future .ring-three { width: 356px !important; height: 356px !important; }

body.home-future .evm-core {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: min(220px, 58vw) !important;
  min-height: min(220px, 58vw) !important;
  margin: 12px auto !important;
  z-index: 3 !important;
}

body.home-future .evm-node {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 4 !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  white-space: normal !important;
}

body.home-future .evm-node span {
  white-space: normal !important;
  text-align: left !important;
}

body.home-future .node-a,
body.home-future .node-b { grid-row: 1 !important; }
body.home-future .node-c,
body.home-future .node-d { grid-row: 3 !important; }
body.home-future .node-a,
body.home-future .node-c { grid-column: 1 !important; }
body.home-future .node-b,
body.home-future .node-d { grid-column: 2 !important; }

body.home-future .chain-future-pulsebar {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  margin-top: 0 !important;
}

@media (max-width: 1040px) {
  body.home-future .chain-future-layout.chain-future-prose {
    grid-template-columns: 1fr !important;
  }
  body.home-future .chain-future-visual {
    max-width: 760px !important;
    width: 100% !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 560px) {
  body.home-future .evm-orbit-card {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
  }
  body.home-future .evm-core,
  body.home-future .evm-node {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  body.home-future .evm-core {
    width: 168px !important;
    min-height: 168px !important;
    order: 1;
  }
  body.home-future .node-a { order: 2; }
  body.home-future .node-b { order: 3; }
  body.home-future .node-c { order: 4; }
  body.home-future .node-d { order: 5; }
  body.home-future .ring-three { width: 280px !important; height: 280px !important; }
  body.home-future .ring-two { width: 220px !important; height: 220px !important; }
  body.home-future .ring-one { width: 160px !important; height: 160px !important; }
}


/* ===== AIONEX AI Insight Cards ===== */
.ai-insight-card {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 10% 0%, rgba(255,126,65,0.15), transparent 34%),
    radial-gradient(circle at 96% 15%, rgba(76,145,255,0.16), transparent 38%),
    linear-gradient(135deg, rgba(12,18,40,0.94), rgba(7,10,24,0.96));
  box-shadow: 0 18px 42px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.04);
}

.ai-insight-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.05) 42%, transparent 62%);
  transform: translateX(-120%);
  animation: aiInsightSweep 7s ease-in-out infinite;
}

.ai-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.ai-kicker {
  font-size: 0.67rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ffb789;
  margin-bottom: 5px;
  font-weight: 800;
}

.ai-card-head h3 {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.2;
  color: var(--text);
}

.ai-card-copy {
  position: relative;
  z-index: 1;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.ai-score-orb {
  position: relative;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.35), transparent 24%),
    conic-gradient(from 210deg, #ff7a36, #48c6ff, #7c5cff, #ff7a36);
  box-shadow: 0 0 28px rgba(76,145,255,0.18), 0 0 24px rgba(255,122,54,0.16);
}

.ai-score-orb::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: rgba(8,12,26,0.92);
}

.ai-score-orb span,
.ai-score-orb small {
  position: relative;
  z-index: 1;
}

.ai-score-orb span {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
}

.ai-score-orb small {
  margin-top: 24px;
  position: absolute;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.68);
  font-weight: 700;
}

.ai-score-orb.is-idle {
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.25), transparent 24%),
    conic-gradient(from 210deg, rgba(255,122,54,0.55), rgba(76,145,255,0.55), rgba(255,122,54,0.55));
}

.ai-check-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.ai-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 13px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.35;
}

.ai-check-dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a36, #4cc9ff);
  box-shadow: 0 0 12px rgba(76,201,255,0.35);
}

.ai-chip-row {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.ai-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255,122,54,0.10);
  border: 1px solid rgba(255,122,54,0.18);
  color: #ffca9a;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.ai-card-footer {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.ai-mini-panel {
  position: relative;
  overflow: hidden;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 0% 0%, rgba(76,145,255,0.12), transparent 35%),
    linear-gradient(135deg, rgba(255,122,54,0.10), rgba(255,255,255,0.035));
}

.ai-mini-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-mini-label {
  color: #ffb789;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 900;
}

.ai-mini-main strong {
  color: var(--text);
  font-size: 1.22rem;
}

.ai-mini-panel p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.ai-mini-meta {
  margin-top: 9px;
  color: rgba(118,214,255,0.82);
  font-size: 0.75rem;
  font-weight: 700;
}

.ai-dashboard-health-card {
  margin-top: 0;
}

@keyframes aiInsightSweep {
  0%, 42% { transform: translateX(-120%); opacity: 0; }
  52% { opacity: 1; }
  68%, 100% { transform: translateX(120%); opacity: 0; }
}

body.light-mode .ai-insight-card {
  border-color: rgba(21,33,66,0.10);
  background:
    radial-gradient(circle at 10% 0%, rgba(255,126,65,0.16), transparent 34%),
    radial-gradient(circle at 96% 15%, rgba(54,115,255,0.14), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(240,245,255,0.96));
  box-shadow: 0 16px 40px rgba(24,42,85,0.10), inset 0 1px 0 rgba(255,255,255,0.75);
}

body.light-mode .ai-score-orb::after {
  background: rgba(255,255,255,0.92);
}

body.light-mode .ai-score-orb span {
  color: #14213d;
}

body.light-mode .ai-score-orb small {
  color: rgba(20,33,61,0.62);
}

body.light-mode .ai-check {
  background: rgba(20,33,61,0.035);
  border-color: rgba(20,33,61,0.08);
}

body.light-mode .ai-card-footer {
  border-top-color: rgba(20,33,61,0.08);
}

body.light-mode .ai-mini-panel {
  border-color: rgba(20,33,61,0.08);
  background:
    radial-gradient(circle at 0% 0%, rgba(54,115,255,0.10), transparent 35%),
    linear-gradient(135deg, rgba(255,122,54,0.10), rgba(255,255,255,0.80));
}

@media (max-width: 760px) {
  .ai-insight-card {
    padding: 14px;
    border-radius: 17px;
  }

  .ai-card-head {
    align-items: flex-start;
  }

  .ai-score-orb {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  .ai-score-orb span {
    font-size: 1rem;
  }

  .ai-score-orb small {
    margin-top: 22px;
    font-size: 0.56rem;
  }

  .ai-check-grid {
    grid-template-columns: 1fr;
  }

  .ai-card-footer {
    flex-direction: column;
    gap: 5px;
  }
}

@media (max-width: 420px) {
  .ai-card-head {
    gap: 10px;
  }

  .ai-card-head h3 {
    font-size: 0.98rem;
  }

  .ai-kicker {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
  }

  .ai-chip-row span {
    font-size: 0.66rem;
  }
}


/* ===== MapleFi Base Faucet Page ===== */
.faucet-page {
  min-height: 100vh;
}

.faucet-main {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 112px 0 64px;
}

.faucet-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 28px;
  align-items: center;
  min-height: 560px;
  padding: clamp(24px, 4vw, 48px);
  border-radius: 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 8% 6%, rgba(255,122,54,0.20), transparent 32%),
    radial-gradient(circle at 88% 16%, rgba(76,145,255,0.22), transparent 34%),
    linear-gradient(135deg, rgba(10,16,36,0.96), rgba(7,10,24,0.98));
  box-shadow: 0 28px 80px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.06);
}

.faucet-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at 50% 35%, black, transparent 75%);
  pointer-events: none;
}

.faucet-hero__bg-orb {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  filter: blur(16px);
  opacity: 0.26;
  pointer-events: none;
}

.faucet-hero__bg-orb.one {
  left: -100px;
  bottom: -110px;
  background: #ff7a36;
}

.faucet-hero__bg-orb.two {
  right: -120px;
  top: -120px;
  background: #4cc9ff;
}

.faucet-hero__content,
.faucet-hero__visual {
  position: relative;
  z-index: 1;
}

.faucet-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,183,137,0.26);
  background: rgba(255,122,54,0.10);
  color: #ffbd91;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom: 18px;
}

.faucet-pill span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7a36, #4cc9ff);
  box-shadow: 0 0 16px rgba(76,201,255,0.45);
}

.faucet-hero h1 {
  margin: 0;
  max-width: 780px;
  font-size: clamp(2.6rem, 7vw, 6.2rem);
  line-height: 0.94;
  letter-spacing: -0.07em;
  color: var(--text);
}

.faucet-hero p {
  max-width: 720px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.7;
}

.faucet-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.faucet-btn,
.faucet-claim-button {
  min-height: 46px;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}

.faucet-btn:hover,
.faucet-claim-button:hover {
  transform: translateY(-1px);
}

.faucet-btn.primary,
.faucet-claim-button.is-ready {
  color: #15101d;
  background: linear-gradient(135deg, #ffb26b, #ff7a36 48%, #4cc9ff);
  box-shadow: 0 16px 32px rgba(255,122,54,0.24), 0 10px 26px rgba(76,201,255,0.16);
}

.faucet-btn.secondary {
  color: var(--text);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
}

.faucet-btn.ghost {
  color: #ffca9a;
  background: transparent;
  border: 1px solid rgba(255,183,137,0.20);
}

.faucet-claim-button.is-disabled,
.faucet-claim-button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
  color: var(--muted);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
}

.faucet-microcopy {
  margin-top: 18px;
  color: rgba(255,255,255,0.58);
  font-size: 0.84rem;
}

.faucet-hero__visual {
  display: grid;
  place-items: center;
  min-height: 420px;
}

.faucet-orbit {
  position: relative;
  width: min(420px, 82vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.faucet-orbit__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
}

.faucet-orbit__ring.ring-a {
  inset: 8%;
  border-top-color: rgba(255,122,54,0.75);
  border-right-color: rgba(76,201,255,0.58);
  animation: faucetSpin 16s linear infinite;
}

.faucet-orbit__ring.ring-b {
  inset: 20%;
  border-left-color: rgba(255,122,54,0.58);
  border-bottom-color: rgba(124,92,255,0.68);
  animation: faucetSpinReverse 20s linear infinite;
}

.faucet-orbit__core {
  width: 172px;
  height: 172px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.24), transparent 28%),
    linear-gradient(135deg, rgba(255,122,54,0.25), rgba(76,201,255,0.19)),
    rgba(8,12,26,0.86);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 0 55px rgba(76,201,255,0.20), 0 0 48px rgba(255,122,54,0.18);
}

.faucet-orbit__core span {
  display: block;
  font-size: 3.2rem;
  font-weight: 1000;
  line-height: 0.9;
  color: #fff;
}

.faucet-orbit__core small {
  display: block;
  margin-top: 8px;
  color: #ffca9a;
  font-weight: 800;
}

.faucet-orbit__node {
  position: absolute;
  min-width: 76px;
  text-align: center;
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 1000;
  color: var(--text);
  background: rgba(255,255,255,0.075);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 24px rgba(0,0,0,0.22);
}

.faucet-orbit__node.node-a { top: 10%; left: 16%; }
.faucet-orbit__node.node-b { right: 8%; top: 44%; }
.faucet-orbit__node.node-c { bottom: 12%; left: 26%; }

.faucet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 18px;
  margin-top: 22px;
}

.faucet-card,
.faucet-section,
.faucet-info-card {
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,122,54,0.10), transparent 34%),
    linear-gradient(135deg, rgba(14,20,43,0.92), rgba(9,13,29,0.94));
  box-shadow: 0 20px 52px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.045);
}

.faucet-card {
  padding: 22px;
}

.faucet-card__head,
.faucet-section__head,
.faucet-ai-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.faucet-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #ffb789;
  font-weight: 1000;
  margin-bottom: 6px;
}

.faucet-card h2,
.faucet-section h2,
.faucet-ai-head h3,
.faucet-info-card h3 {
  margin: 0;
  color: var(--text);
}

.faucet-mode {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(76,201,255,0.10);
  border: 1px solid rgba(76,201,255,0.20);
  color: #9fe8ff;
  font-size: 0.72rem;
  font-weight: 1000;
}

.faucet-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 20px;
}

.faucet-status,
.faucet-requirements > div {
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.065);
  min-width: 0;
}

.faucet-status span,
.faucet-requirements span,
.faucet-claim-box span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  margin-bottom: 5px;
}

.faucet-status strong,
.faucet-requirements strong,
.faucet-claim-box strong {
  display: block;
  color: var(--text);
  font-size: 0.98rem;
  overflow-wrap: anywhere;
}

.faucet-requirements {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}

.faucet-claim-box {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,183,137,0.14);
  background: linear-gradient(135deg, rgba(255,122,54,0.10), rgba(76,201,255,0.07));
}

.faucet-claim-box small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.45;
}

.faucet-claim-button {
  flex: 0 0 auto;
  min-width: 210px;
}

.faucet-ai-card {
  position: relative;
  overflow: hidden;
}

.faucet-ai-card::before {
  content: "";
  position: absolute;
  inset: -35%;
  background: conic-gradient(from 0deg, transparent, rgba(76,201,255,0.16), rgba(255,122,54,0.16), transparent);
  animation: faucetSpin 18s linear infinite;
}

.faucet-ai-card > * {
  position: relative;
  z-index: 1;
}

.faucet-ai-card p {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.6;
}

.faucet-score {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background: conic-gradient(from 180deg, #ff7a36, #4cc9ff, #7c5cff, #ff7a36);
  box-shadow: 0 0 32px rgba(76,201,255,0.18);
}

.faucet-score::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(8,12,26,0.92);
}

.faucet-score span,
.faucet-score small {
  position: relative;
  z-index: 1;
}

.faucet-score span {
  color: #fff;
  font-weight: 1000;
  font-size: 1.18rem;
}

.faucet-score small {
  position: absolute;
  margin-top: 26px;
  color: rgba(255,255,255,0.68);
  font-size: 0.62rem;
  font-weight: 800;
}

.faucet-ai-grid {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.faucet-ai-grid span {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 10px 11px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 0.86rem;
}

.faucet-ai-grid i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 9px;
  background: linear-gradient(135deg, #ff7a36, #4cc9ff);
  box-shadow: 0 0 14px rgba(76,201,255,0.32);
}

.faucet-section {
  margin-top: 18px;
  padding: 24px;
}

.faucet-section__head p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.faucet-link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-top: 18px;
}

.faucet-link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.07);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.faucet-link-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,183,137,0.25);
  background: rgba(255,122,54,0.09);
}

.faucet-link-card.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.faucet-link-orb {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  background: linear-gradient(135deg, rgba(255,122,54,0.26), rgba(76,201,255,0.20));
  border: 1px solid rgba(255,255,255,0.08);
  color: #ffca9a;
  font-weight: 1000;
}

.faucet-link-card strong,
.faucet-link-card small {
  display: block;
}

.faucet-link-card small {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.35;
}

.faucet-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 18px;
}

.faucet-info-card {
  padding: 22px;
}

.faucet-info-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 15px;
  color: #15101d;
  background: linear-gradient(135deg, #ffb26b, #4cc9ff);
  font-weight: 1000;
}

.faucet-info-card p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

@keyframes faucetSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes faucetSpinReverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

body.light-mode .faucet-hero,
body.light-mode .faucet-card,
body.light-mode .faucet-section,
body.light-mode .faucet-info-card {
  border-color: rgba(20,33,61,0.10);
  background:
    radial-gradient(circle at 8% 6%, rgba(255,122,54,0.15), transparent 32%),
    radial-gradient(circle at 88% 16%, rgba(54,115,255,0.14), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(242,246,255,0.96));
  box-shadow: 0 22px 60px rgba(24,42,85,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
}

body.light-mode .faucet-status,
body.light-mode .faucet-requirements > div,
body.light-mode .faucet-link-card,
body.light-mode .faucet-ai-grid span {
  background: rgba(20,33,61,0.035);
  border-color: rgba(20,33,61,0.08);
}

body.light-mode .faucet-orbit__core,
body.light-mode .faucet-score::after {
  background: rgba(255,255,255,0.94);
}

body.light-mode .faucet-orbit__core span,
body.light-mode .faucet-score span {
  color: #14213d;
}

body.light-mode .faucet-score small {
  color: rgba(20,33,61,0.62);
}

body.light-mode .faucet-microcopy {
  color: rgba(20,33,61,0.58);
}

@media (max-width: 1080px) {
  .faucet-hero,
  .faucet-grid {
    grid-template-columns: 1fr;
  }

  .faucet-hero__visual {
    min-height: 320px;
  }

  .faucet-link-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  .faucet-main {
    width: min(100% - 22px, 1180px);
    padding-top: 96px;
  }

  .faucet-hero {
    padding: 22px;
    border-radius: 24px;
    min-height: auto;
  }

  .faucet-hero h1 {
    font-size: clamp(2.35rem, 15vw, 4.4rem);
  }

  .faucet-hero__actions,
  .faucet-claim-box,
  .faucet-card__head,
  .faucet-section__head,
  .faucet-ai-head {
    flex-direction: column;
    align-items: stretch;
  }

  .faucet-btn,
  .faucet-claim-button {
    width: 100%;
  }

  .faucet-status-grid,
  .faucet-requirements,
  .faucet-link-grid,
  .faucet-info-grid {
    grid-template-columns: 1fr;
  }

  .faucet-orbit {
    width: min(300px, 82vw);
  }

  .faucet-orbit__core {
    width: 136px;
    height: 136px;
  }

  .faucet-orbit__core span {
    font-size: 2.4rem;
  }

  .faucet-orbit__node {
    min-width: 64px;
    font-size: 0.78rem;
  }
}


/* =========================================================
   MapleFi Team Page - responsive warrior roster
   ========================================================= */
body.team-page {
    background:
        radial-gradient(circle at 8% 10%, rgba(255, 105, 77, 0.18), transparent 32%),
        radial-gradient(circle at 92% 18%, rgba(69, 214, 255, 0.14), transparent 30%),
        radial-gradient(circle at 50% 95%, rgba(255, 158, 77, 0.12), transparent 34%),
        var(--bg);
}
body.team-page.light-mode {
    background:
        radial-gradient(circle at 8% 10%, rgba(255, 105, 77, 0.16), transparent 30%),
        radial-gradient(circle at 92% 18%, rgba(69, 214, 255, 0.14), transparent 30%),
        linear-gradient(180deg, #fffaf6 0%, #f7fbff 100%);
}
.team-main { position: relative; overflow: hidden; }
.team-hero {
    position: relative;
    padding: clamp(72px, 9vw, 132px) 0 clamp(42px, 7vw, 88px);
    isolation: isolate;
}
.team-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(circle at 50% 25%, #000 0%, transparent 72%);
    z-index: -2;
}
body.team-page.light-mode .team-hero::before { background-image: linear-gradient(rgba(10,20,40,0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(10,20,40,0.055) 1px, transparent 1px); }
.team-aurora { position: absolute; width: 440px; height: 440px; border-radius: 999px; filter: blur(54px); opacity: .58; pointer-events: none; z-index: -1; animation: teamAuroraFloat 9s ease-in-out infinite; }
.team-aurora-a { left: -120px; top: 48px; background: rgba(255, 91, 69, 0.34); }
.team-aurora-b { right: -120px; top: 112px; background: rgba(69, 214, 255, 0.28); animation-delay: -3s; }
.team-hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(320px, .74fr); align-items: center; gap: clamp(28px, 6vw, 76px); }
.team-kicker { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.055); border-radius: 999px; color: var(--muted); font-size: .88rem; font-weight: 700; letter-spacing: .02em; backdrop-filter: blur(14px); }
.team-kicker span { width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(135deg, #ff5a4d, #ffd166); box-shadow: 0 0 18px rgba(255, 120, 77, .65); }
.team-hero h1 { margin: 24px 0 18px; max-width: 920px; font-family: 'Orbitron', 'Poppins', sans-serif; font-size: clamp(2.35rem, 6.2vw, 5.95rem); line-height: .98; letter-spacing: -0.075em; background: linear-gradient(110deg, #fff 0%, #ffd8c2 32%, #ff7a36 56%, #45d6ff 84%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.team-page.light-mode .team-hero h1 { background: linear-gradient(110deg, #111827 0%, #9a3412 36%, #f97316 56%, #0369a1 84%, #111827 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.team-hero-lead { max-width: 760px; color: var(--muted); font-size: clamp(1.02rem, 1.7vw, 1.24rem); line-height: 1.85; }
.team-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.team-command-card { position: relative; min-height: 430px; display: grid; place-items: center; border-radius: 36px; background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.035)); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 90px rgba(0,0,0,.32); overflow: hidden; backdrop-filter: blur(22px); }
body.team-page.light-mode .team-command-card { background: rgba(255,255,255,.72); border-color: rgba(15,23,42,.10); box-shadow: 0 26px 70px rgba(15,23,42,.12); }
.team-command-card::before { content:""; position:absolute; inset:-90px; background: conic-gradient(from 120deg, rgba(255,90,77,.12), rgba(69,214,255,.32), rgba(255,209,102,.18), rgba(255,90,77,.12)); animation: spinSlow 14s linear infinite; }
.team-command-ring { position:absolute; width: 285px; height: 285px; border-radius:50%; border: 2px dashed rgba(255,255,255,.22); animation: spinSlowReverse 22s linear infinite; }
.team-command-inner { position: relative; width: min(82%, 360px); min-height: 310px; border-radius: 32px; padding: 34px; background: rgba(9,13,28,.82); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
body.team-page.light-mode .team-command-inner { background: rgba(255,255,255,.88); }
.team-command-label { color: var(--muted); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 800; }
.team-command-inner strong { display:block; margin: 10px 0; font-family:'Orbitron', sans-serif; font-size: clamp(3rem, 7vw, 5rem); line-height:1; background: linear-gradient(90deg,#ff7849,#ffd166,#45d6ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.team-command-inner p { color: var(--muted); }
.team-proof-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin-top:22px; }
.team-proof-grid span { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); font-size:.84rem; font-weight:700; color: var(--text); }
body.team-page.light-mode .team-proof-grid span { background: rgba(15,23,42,.045); border-color: rgba(15,23,42,.08); }
.team-section, .team-expertise-section { padding: clamp(54px, 8vw, 104px) 0; }
.team-heading { max-width: 760px; margin: 0 auto 34px; text-align:center; }
.section-kicker { display:inline-flex; align-items:center; gap:8px; color:#ff9e4d; font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; }
.team-heading h2, .team-expertise-shell h2 { font-size: clamp(2rem, 4vw, 3.8rem); line-height:1.05; letter-spacing:-.045em; }
.team-heading p, .team-expertise-shell p { color: var(--muted); }
.team-roster { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.team-card { position:relative; min-height: 100%; border-radius: 30px; padding: 16px; background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.105); box-shadow: 0 24px 70px rgba(0,0,0,.22); overflow:hidden; transform-style: preserve-3d; transition: transform .34s ease, border-color .34s ease, box-shadow .34s ease; }
.team-card:hover { transform: translateY(-9px) rotateX(1.5deg); border-color: rgba(255,158,77,.38); box-shadow: 0 30px 88px rgba(255,112,61,.15), 0 24px 70px rgba(0,0,0,.26); }
.team-card-bg { position:absolute; inset:-1px; background: radial-gradient(circle at 20% 0%, rgba(255, 120, 73, .22), transparent 36%), radial-gradient(circle at 92% 8%, rgba(69, 214, 255, .15), transparent 32%); opacity:.9; pointer-events:none; }
body.team-page.light-mode .team-card { background: rgba(255,255,255,.78); border-color: rgba(15,23,42,.09); box-shadow: 0 20px 54px rgba(15,23,42,.10); }
.team-card-founder { grid-column: span 2; display:grid; grid-template-columns: minmax(210px, .85fr) 1.15fr; gap: 20px; align-items: stretch; }
.team-avatar-wrap { position:relative; z-index:1; border-radius: 24px; overflow:hidden; background: rgba(6,10,23,.72); border:1px solid rgba(255,255,255,.10); min-height: 260px; display:grid; place-items:center; }
.team-avatar-wrap::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 56%, rgba(0,0,0,.34)); pointer-events:none; }
.team-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display:block; transition: transform .5s ease, filter .5s ease; }
.team-card:hover .team-avatar-wrap img { transform: scale(1.055); filter: saturate(1.12) contrast(1.05); }
.team-card-content { position:relative; z-index:1; padding: 20px 8px 8px; display:flex; flex-direction:column; min-height: 100%; }
.team-card-founder .team-card-content { padding: 22px 16px 14px 0; }
.team-role-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:space-between; margin-bottom: 8px; }
.team-role-row span { display:inline-flex; padding: 7px 10px; border-radius: 999px; background: rgba(255,120,73,.11); border:1px solid rgba(255,120,73,.22); color:#ffb27e; font-weight:800; font-size:.76rem; text-transform:uppercase; letter-spacing:.075em; }
.team-role-row .team-location { color:#9de8ff; background:rgba(69,214,255,.10); border-color:rgba(69,214,255,.22); }
body.team-page.light-mode .team-role-row span { color:#9a3412; background:rgba(249,115,22,.10); }
body.team-page.light-mode .team-role-row .team-location { color:#075985; background:rgba(14,165,233,.10); }
.team-card h3 { margin: 0 0 10px; font-size: clamp(1.35rem, 2.1vw, 2rem); letter-spacing:-.035em; }
.team-card p { color: var(--muted); font-size: .95rem; line-height:1.72; }
.team-tags { display:flex; flex-wrap:wrap; gap:8px; margin: 18px 0 20px; }
.team-tags span { padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color: var(--text); font-size:.76rem; font-weight:700; }
body.team-page.light-mode .team-tags span { background:rgba(15,23,42,.045); border-color:rgba(15,23,42,.08); }
.team-telegram { margin-top:auto; display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, rgba(42,171,238,.16), rgba(255,126,54,.10)); border:1px solid rgba(42,171,238,.24); color: var(--text); font-weight:800; text-decoration:none; transition: transform .25s ease, border-color .25s ease, background .25s ease; }
.team-telegram:hover { transform: translateY(-2px); border-color: rgba(42,171,238,.48); text-decoration:none; }
.tg-icon { width: 24px; height:24px; display:inline-grid; place-items:center; border-radius:50%; background:#2aabee; box-shadow: 0 0 18px rgba(42,171,238,.34); }
.tg-icon svg { width:14px; height:14px; fill:#fff; }
.team-expertise-shell { border-radius: 36px; padding: clamp(24px, 5vw, 48px); background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.10); box-shadow: 0 26px 80px rgba(0,0,0,.22); }
body.team-page.light-mode .team-expertise-shell { background: rgba(255,255,255,.80); border-color: rgba(15,23,42,.09); box-shadow: 0 20px 58px rgba(15,23,42,.10); }
.expertise-grid { margin-top: 28px; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.expertise-grid div { padding: 20px; border-radius: 22px; background: rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.08); min-height: 154px; transition: transform .25s ease, border-color .25s ease; }
.expertise-grid div:hover { transform: translateY(-5px); border-color: rgba(255,158,77,.28); }
body.team-page.light-mode .expertise-grid div { background:rgba(15,23,42,.045); border-color:rgba(15,23,42,.08); }
.expertise-grid strong { display:block; margin-bottom:8px; font-size:1.05rem; color: var(--text); }
.expertise-grid span { color: var(--muted); font-size:.92rem; line-height:1.65; }
@keyframes teamAuroraFloat { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(24px,-18px,0) scale(1.08); } }
@media (max-width: 1120px) { .team-roster { grid-template-columns: repeat(2, minmax(0,1fr)); } .team-card-founder { grid-column: span 2; } }
@media (max-width: 920px) { .team-hero-grid { grid-template-columns: 1fr; } .team-command-card { min-height: 360px; } .expertise-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 680px) { .team-hero { padding-top: 54px; } .team-kicker { border-radius: 18px; align-items:flex-start; } .team-card-founder, .team-roster, .expertise-grid { grid-template-columns: 1fr; } .team-card-founder { grid-column: auto; } .team-card-founder .team-card-content { padding: 20px 8px 8px; } .team-avatar-wrap { min-height: 300px; } .team-command-inner { width: 88%; padding: 26px; } .team-proof-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .team-aurora, .team-command-card::before, .team-command-ring { animation: none !important; } .team-card, .team-avatar-wrap img, .expertise-grid div, .team-telegram { transition: none !important; } }

body.light-mode .token-selector-modal {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.98));
    border-color: rgba(255, 158, 77, 0.28);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(255,255,255,0.86) inset;
}

body.light-mode.token-selector-open::before {
    background: rgba(15, 23, 42, 0.28);
}


/* ===== PROFESSIONAL SEARCHABLE TOKEN SELECTOR UPGRADE ===== */
.professional-token-selector {
    width: min(520px, calc(100vw - 28px));
    padding: 0;
    border-radius: 28px;
    background:
      radial-gradient(circle at top left, rgba(255, 158, 77, 0.16), transparent 34%),
      radial-gradient(circle at bottom right, rgba(74, 222, 128, 0.12), transparent 30%),
      linear-gradient(180deg, rgba(24, 25, 38, 0.98), rgba(13, 14, 24, 0.99));
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 38px 100px rgba(0,0,0,0.62), 0 0 0 1px rgba(255,158,77,0.10) inset;
}
.professional-selector-header {
    padding: 22px 22px 14px;
    margin: 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.professional-selector-header > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.professional-selector-header span {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--text);
}
.professional-selector-header small {
    color: var(--muted);
    font-size: 0.82rem;
}
.selector-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: var(--text) !important;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.selector-close-btn:hover { transform: rotate(90deg); background: rgba(255,158,77,0.16) !important; border-color: rgba(255,158,77,0.34) !important; }
.token-search-shell {
    position: relative;
    margin: 18px 22px 14px;
}
.token-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 1.05rem;
    pointer-events: none;
}
.token-search-input {
    width: 100%;
    height: 52px;
    padding: 0 16px 0 44px;
    border-radius: 18px;
    outline: none;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(4, 6, 16, 0.58);
    color: var(--text);
    font-size: 0.98rem;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18) inset;
}
.token-search-input:focus {
    border-color: rgba(255,158,77,0.55);
    box-shadow: 0 0 0 4px rgba(255,158,77,0.10), 0 12px 28px rgba(0,0,0,0.18) inset;
}
.token-selector-section { padding: 0 22px 10px; }
.selector-section-label {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .10em;
    font-size: .68rem;
    font-weight: 900;
    margin-bottom: 10px;
}
.selector-list-label { padding: 0 22px; margin-top: 2px; }
.token-chip-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}
.token-quick-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    color: var(--text);
    font-weight: 800;
    cursor: pointer;
}
.token-quick-chip img { width: 18px; height: 18px; border-radius: 999px; }
.token-quick-chip:hover { border-color: rgba(255,158,77,0.42); background: rgba(255,158,77,0.12); }
.professional-token-list {
    max-height: min(430px, calc(100vh - 345px));
    min-height: 170px;
    padding: 8px 14px 12px 22px;
    gap: 8px;
}
.professional-token-item {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: rgba(255,255,255,0.035);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.professional-token-item:hover,
.professional-token-item.is-selected {
    background: rgba(255,158,77,0.12);
    border-color: rgba(255,158,77,0.32);
    transform: translateY(-1px);
}
.professional-token-item.is-selected::after {
    content: "Selected";
    grid-column: 1 / -1;
    justify-self: start;
    margin-left: 54px;
    margin-top: -4px;
    color: #4ade80;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.token-row-icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255,158,77,0.22), rgba(74,222,128,0.14));
    border: 1px solid rgba(255,255,255,0.10);
    overflow: hidden;
    font-weight: 900;
}
.token-row-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.token-row-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.token-row-main strong { color: var(--text); font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.token-row-main small { color: var(--muted); font-size: .80rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.token-row-meta { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; color: var(--muted); font-size: .76rem; }
.token-row-meta b { color: var(--text); font-size: .78rem; font-weight: 800; }
.token-selector-empty {
    margin: 8px 22px 16px;
    min-height: 116px;
    border: 1px dashed rgba(255,255,255,0.14);
    border-radius: 18px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: var(--muted);
    text-align: center;
}
.token-selector-empty strong { color: var(--text); }
.token-selector-footer-note {
    padding: 13px 22px 18px;
    border-top: 1px solid rgba(255,255,255,0.07);
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.45;
}
body.light-mode .professional-token-selector {
    background:
      radial-gradient(circle at top left, rgba(255, 158, 77, 0.14), transparent 34%),
      radial-gradient(circle at bottom right, rgba(59, 130, 246, 0.10), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,252,0.99));
    border-color: rgba(15,23,42,0.10);
}
body.light-mode .token-search-input,
body.light-mode .professional-token-item,
body.light-mode .token-quick-chip,
body.light-mode .selector-close-btn {
    background: rgba(15,23,42,0.04) !important;
    border-color: rgba(15,23,42,0.08) !important;
}
body.light-mode .professional-token-item:hover,
body.light-mode .professional-token-item.is-selected,
body.light-mode .token-quick-chip:hover {
    background: rgba(255,158,77,0.14) !important;
    border-color: rgba(255,158,77,0.32) !important;
}
@media (max-width: 560px) {
    .professional-token-selector {
        width: 100vw;
        max-width: 100vw;
        top: auto;
        bottom: 0;
        left: 0;
        transform: none;
        border-radius: 28px 28px 0 0;
        max-height: min(88vh, 760px);
    }
    .professional-token-list { max-height: min(42vh, 380px); }
    .professional-token-item { grid-template-columns: 38px minmax(0, 1fr); }
    .token-row-meta { grid-column: 2; align-items: flex-start; }
}

/* ===== MAPLEFI PROFESSIONAL TOKEN BUTTON + AI AGENT BRAND LAYER ===== */
.token-select {
    min-width: 136px;
    max-width: 178px;
    min-height: 48px;
    justify-content: center;
    border-left: 1px solid rgba(255,255,255,0.06);
    border-radius: 0 16px 16px 0;
}
.token-select span[id$="TokenName"],
.token-select span[id$="Name"] {
    display: inline-block;
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.05;
}
.token-select svg { flex: 0 0 auto; opacity: .76; }
.token-select img { flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(255,255,255,0.06); }
body.light-mode .token-select { border-left-color: rgba(15,23,42,0.06); }
@media (max-width: 560px) {
    .input-wrapper { align-items: stretch; }
    .token-select { min-width: 112px; max-width: 132px; padding: 0 10px; gap: 6px; }
    .token-select span[id$="TokenName"], .token-select span[id$="Name"] { max-width: 62px; font-size: .92rem; }
    .token-select img { width: 22px; height: 22px; }
}

.maple-agent-strip {
    position: relative;
    z-index: 20;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background:
      radial-gradient(circle at 12% 50%, rgba(255,158,77,.18), transparent 28%),
      radial-gradient(circle at 82% 50%, rgba(74,222,128,.14), transparent 26%),
      linear-gradient(90deg, rgba(9,12,24,.96), rgba(20,22,38,.92));
    overflow: hidden;
}
.maple-agent-strip::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    transform: translateX(-100%);
    animation: mapleAgentScan 5.4s linear infinite;
    pointer-events: none;
}
.maple-agent-strip-inner {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    min-height: 64px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 10px 0;
}
.maple-agent-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 1000;
    letter-spacing: .03em;
    background: linear-gradient(135deg, #ff4d4d, #ff9e4d 38%, #53f39a 70%, #4da3ff);
    box-shadow: 0 16px 38px rgba(255,112,72,.22), 0 0 0 1px rgba(255,255,255,.16) inset;
}
.maple-agent-avatar::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 12px;
    background: rgba(10,13,24,.86);
    box-shadow: inset 0 0 18px rgba(83,243,154,.12);
}
.maple-agent-avatar span { position: relative; z-index: 1; font-size: .76rem; }
.maple-agent-copy { min-width: 0; }
.maple-agent-copy strong {
    display: block;
    color: var(--text);
    font-size: .98rem;
    line-height: 1.22;
    letter-spacing: -.01em;
}
.maple-agent-copy p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.35;
}
.maple-agent-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 3px;
    color: #ffbd80;
    text-transform: uppercase;
    letter-spacing: .13em;
    font-size: .62rem;
    font-weight: 1000;
}
.maple-agent-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #53f39a;
    box-shadow: 0 0 0 5px rgba(83,243,154,.12), 0 0 18px rgba(83,243,154,.55);
}
.maple-agent-actions { display: flex; align-items: center; gap: 8px; }
.maple-agent-chip,
.maple-agent-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: .72rem;
    font-weight: 1000;
    text-decoration: none;
    white-space: nowrap;
}
.maple-agent-chip {
    color: #92ffd0;
    border: 1px solid rgba(83,243,154,.22);
    background: rgba(83,243,154,.10);
}
.maple-agent-link {
    color: #fff;
    border: 1px solid rgba(255,158,77,.34);
    background: linear-gradient(90deg, rgba(255,77,77,.82), rgba(255,158,77,.82));
    box-shadow: 0 12px 26px rgba(255,126,54,.18);
}
.maple-agent-link:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(255,126,54,.25); }
body.light-mode .maple-agent-strip {
    border-bottom-color: rgba(15,23,42,.08);
    background:
      radial-gradient(circle at 12% 50%, rgba(255,158,77,.16), transparent 28%),
      radial-gradient(circle at 82% 50%, rgba(59,130,246,.12), transparent 26%),
      linear-gradient(90deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
}
body.light-mode .maple-agent-avatar::after { background: rgba(255,255,255,.88); }
body.light-mode .maple-agent-avatar span { color: #111827; }
body.light-mode .maple-agent-chip { color: #047857; border-color: rgba(5,150,105,.22); background: rgba(16,185,129,.10); }
@keyframes mapleAgentScan { to { transform: translateX(100%); } }
@media (max-width: 820px) {
    .maple-agent-strip-inner { grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
    .maple-agent-actions { grid-column: 1 / -1; overflow-x: auto; padding-bottom: 2px; }
}
@media (max-width: 520px) {
    .maple-agent-strip-inner { width: min(100% - 24px, 1180px); min-height: 58px; }
    .maple-agent-avatar { width: 40px; height: 40px; border-radius: 15px; }
    .maple-agent-copy strong { font-size: .88rem; }
    .maple-agent-copy p { font-size: .74rem; }
    .maple-agent-chip, .maple-agent-link { font-size: .68rem; padding: 7px 10px; }
}

.agent-story-section {
    position: relative;
    padding: 88px 0;
    overflow: hidden;
}
.agent-story-section::before {
    content: "";
    position: absolute;
    inset: 10% -10% auto -10%;
    height: 72%;
    background:
      radial-gradient(circle at 22% 44%, rgba(255,158,77,.18), transparent 30%),
      radial-gradient(circle at 76% 36%, rgba(83,243,154,.14), transparent 28%),
      linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    filter: blur(.2px);
    pointer-events: none;
}
.agent-story-shell {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(320px, .98fr);
    gap: 28px;
    align-items: center;
    padding: 34px;
    border-radius: 36px;
    border: 1px solid rgba(255,255,255,.10);
    background:
      linear-gradient(135deg, rgba(36,38,55,.78), rgba(12,14,24,.86)),
      radial-gradient(circle at top left, rgba(255,158,77,.16), transparent 36%);
    box-shadow: 0 34px 90px rgba(0,0,0,.38);
}
.agent-story-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    color: #ffbd80;
    background: rgba(255,158,77,.10);
    border: 1px solid rgba(255,158,77,.20);
    font-size: .72rem;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .12em;
}
.agent-story-title {
    margin: 18px 0 12px;
    color: var(--text);
    font-size: clamp(2rem, 4vw, 4.4rem);
    line-height: .98;
    letter-spacing: -.055em;
}
.agent-story-copy {
    color: var(--muted);
    font-size: clamp(.98rem, 1.3vw, 1.12rem);
    line-height: 1.75;
    max-width: 720px;
}
.agent-story-copy strong { color: var(--text); }
.agent-story-points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
    margin-top: 22px;
}
.agent-story-point {
    padding: 15px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.045);
}
.agent-story-point span {
    display: block;
    color: #ffbd80;
    font-size: .68rem;
    font-weight: 1000;
    text-transform: uppercase;
    letter-spacing: .10em;
}
.agent-story-point strong {
    display: block;
    margin-top: 6px;
    color: var(--text);
    font-size: .95rem;
    line-height: 1.25;
}
.agent-command-console {
    position: relative;
    min-height: 460px;
    border-radius: 30px;
    padding: clamp(16px, 2vw, 24px);
    background:
      radial-gradient(circle at 50% 20%, rgba(83,243,154,.18), transparent 32%),
      radial-gradient(circle at 82% 80%, rgba(77,163,255,.12), transparent 32%),
      rgba(5,7,16,.66);
    border: 1px solid rgba(255,255,255,.10);
    overflow: hidden;
    display: grid;
    grid-template-rows: minmax(270px, 1fr) auto;
    gap: 16px;
    isolation: isolate;
}
.agent-command-console::before {
    content: "";
    position: absolute;
    inset: -45% -25%;
    background: conic-gradient(from 160deg, transparent 0 35%, rgba(255,158,77,.10), transparent 48% 68%, rgba(83,243,154,.10), transparent 80% 100%);
    animation: agentAuraSpin 16s linear infinite;
    opacity: .9;
    z-index: -1;
}
.agent-command-stage {
    position: relative;
    min-height: clamp(260px, 29vw, 350px);
    border-radius: 24px;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
      radial-gradient(circle at 50% 52%, rgba(83,243,154,.13), transparent 34%);
}
.agent-scan-field {
    position: absolute;
    inset: 14px;
    border-radius: 22px;
    background:
      linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(circle at 50% 50%, #000 0 58%, transparent 75%);
    opacity: .45;
}
.agent-scan-field::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: -20%;
    height: 32%;
    border-radius: 999px;
    background: linear-gradient(180deg, transparent, rgba(83,243,154,.25), transparent);
    filter: blur(5px);
    animation: agentScan 5.5s ease-in-out infinite;
}
.agent-command-orbit {
    position: absolute;
    width: min(70%, 310px);
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255,158,77,.24);
    box-shadow: inset 0 0 40px rgba(255,158,77,.035);
    animation: agentOrbitCentered 14s linear infinite;
}
.agent-command-orbit-secondary {
    width: min(54%, 232px);
    border-color: rgba(83,243,154,.20);
    animation-duration: 9s;
    animation-direction: reverse;
}
.agent-command-orbit::before,
.agent-command-orbit::after {
    content: "";
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 999px;
    background: #53f39a;
    box-shadow: 0 0 24px rgba(83,243,154,.72);
}
.agent-command-orbit::before { top: 14%; left: 18%; }
.agent-command-orbit::after { right: 16%; bottom: 18%; background: #ff9e4d; box-shadow: 0 0 24px rgba(255,158,77,.72); }
.agent-command-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(118px, 13vw, 166px);
    height: clamp(118px, 13vw, 166px);
    border-radius: clamp(28px, 3vw, 42px);
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ff4d4d, #ff9e4d 34%, #53f39a 68%, #4da3ff);
    box-shadow: 0 28px 80px rgba(255,126,54,.24), 0 0 0 1px rgba(255,255,255,.18) inset;
    animation: agentCorePulse 3.8s ease-in-out infinite;
}
.agent-command-core::after {
    content: "AI";
    position: absolute;
    inset: clamp(17px, 1.7vw, 22px);
    border-radius: clamp(20px, 2vw, 28px);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 1000;
    background: rgba(8,11,21,.90);
}
.agent-command-log {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    z-index: 2;
}
.agent-command-log div {
    display: grid;
    grid-template-columns: minmax(72px, .8fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 12px 14px;
    border-radius: 16px;
    color: var(--muted);
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.09);
    font-size: .82rem;
    backdrop-filter: blur(12px);
}
.agent-command-log strong {
    color: var(--text);
    text-align: right;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.agent-command-node {
    position: absolute;
    z-index: 3;
    max-width: min(42%, 178px);
    padding: 9px 12px;
    border-radius: 999px;
    color: var(--text);
    font-size: clamp(.64rem, .8vw, .76rem);
    line-height: 1.1;
    font-weight: 900;
    text-align: center;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 14px 30px rgba(0,0,0,.16);
    backdrop-filter: blur(14px);
    animation: agentNodeFloat 4.8s ease-in-out infinite;
}
.agent-node-a { top: 7%; left: 7%; animation-delay: -.4s; }
.agent-node-b { top: 15%; right: 6%; animation-delay: -1.2s; }
.agent-node-c { left: 6%; bottom: 16%; animation-delay: -2s; }
.agent-node-d { right: 7%; bottom: 14%; animation-delay: -2.8s; }
body.light-mode .agent-story-shell {
    background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(248,250,252,.94));
    border-color: rgba(15,23,42,.08);
    box-shadow: 0 34px 80px rgba(15,23,42,.10);
}
body.light-mode .agent-story-point,
body.light-mode .agent-command-console,
body.light-mode .agent-command-log div,
body.light-mode .agent-command-node {
    background: rgba(15,23,42,.035);
    border-color: rgba(15,23,42,.08);
}
@keyframes agentOrbit { to { transform: rotate(360deg); } }
@keyframes agentOrbitCentered { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes agentAuraSpin { to { transform: rotate(360deg); } }
@keyframes agentScan { 0%, 100% { transform: translateY(0); opacity: .15; } 50% { transform: translateY(360%); opacity: .75; } }
@keyframes agentCorePulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); filter: saturate(1); } 50% { transform: translate(-50%, -50%) scale(1.035); filter: saturate(1.18); } }
@keyframes agentNodeFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 1120px) {
    .agent-story-shell { grid-template-columns: 1fr; }
    .agent-command-console { min-height: 430px; }
    .agent-command-stage { min-height: 310px; }
}
@media (max-width: 960px) {
    .agent-story-section { padding: 56px 0; }
    .agent-story-shell { padding: 24px; border-radius: 28px; }
    .agent-story-points { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .agent-story-shell { padding: 18px; }
    .agent-command-console { min-height: auto; padding: 14px; gap: 12px; border-radius: 24px; }
    .agent-command-stage { min-height: 290px; border-radius: 20px; }
    .agent-command-node { max-width: 46%; font-size: .62rem; padding: 7px 9px; }
    .agent-node-a { top: 8%; left: 5%; }
    .agent-node-b { top: 8%; right: 5%; }
    .agent-node-c { left: 5%; bottom: 10%; }
    .agent-node-d { right: 5%; bottom: 10%; }
    .agent-command-log div { grid-template-columns: 1fr; gap: 4px; min-height: auto; }
    .agent-command-log strong { text-align: left; }
}
@media (max-width: 380px) {
    .agent-command-stage { min-height: 260px; }
    .agent-command-node { max-width: 48%; font-size: .58rem; padding: 6px 8px; }
}

/* ===== NOVA-01 HOME AIONEX VISUAL FIX + PREMIUM ANIMATION ===== */
body.home-future .aionex-innovation-shell {
  grid-template-columns: minmax(0, 1fr) minmax(460px, 0.92fr) !important;
  align-items: center !important;
  gap: clamp(24px, 4vw, 58px) !important;
  overflow: hidden !important;
}
body.home-future .aionex-innovation-copy h2 {
  max-width: 760px !important;
}
body.home-future .aionex-innovation-copy .text-gradient-aionex {
  display: inline-block !important;
  max-width: 100% !important;
}
body.home-future .nova-visual-panel {
  position: relative !important;
  width: 100% !important;
  min-height: clamp(430px, 42vw, 500px) !important;
  padding: clamp(18px, 2.4vw, 30px) !important;
  display: grid !important;
  grid-template-rows: 1fr auto auto !important;
  align-items: center !important;
  gap: 16px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 143, 88, 0.16), transparent 31%),
    radial-gradient(circle at 78% 18%, rgba(84, 231, 190, 0.12), transparent 24%),
    radial-gradient(circle at 18% 88%, rgba(87, 140, 255, 0.12), transparent 28%),
    linear-gradient(150deg, rgba(6, 12, 29, 0.98), rgba(13, 21, 43, 0.96)) !important;
}
body.home-future .nova-visual-panel::before,
body.home-future .nova-visual-panel::after {
  content: '' !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
body.home-future .nova-visual-panel::before {
  inset: -2px !important;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.075), transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 74px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.032) 0 1px, transparent 1px 74px) !important;
  mask-image: radial-gradient(circle at 50% 46%, #000 0%, transparent 72%) !important;
  opacity: 0.55 !important;
  animation: novaGridDrift 12s linear infinite !important;
}
body.home-future .nova-visual-panel::after {
  width: 150px !important;
  height: 150px !important;
  right: 9% !important;
  top: 10% !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(82, 255, 171, 0.48), rgba(82, 255, 171, 0.12) 28%, transparent 68%) !important;
  filter: blur(1px) !important;
  animation: novaPulseBeacon 3.2s ease-in-out infinite !important;
}
body.home-future .nova-grid-glow {
  position: absolute !important;
  inset: 12% 8% 18% !important;
  z-index: 0 !important;
  border-radius: 999px !important;
  background: conic-gradient(from 90deg, rgba(255,128,80,0.16), rgba(101,235,196,0.12), rgba(80,138,255,0.12), rgba(255,128,80,0.16)) !important;
  filter: blur(24px) !important;
  opacity: 0.85 !important;
  animation: novaAuroraShift 8s ease-in-out infinite alternate !important;
}
body.home-future .nova-orbit-stage {
  position: relative !important;
  z-index: 2 !important;
  width: min(360px, 72vw) !important;
  aspect-ratio: 1 !important;
  margin: 4px auto 0 !important;
  display: grid !important;
  place-items: center !important;
}
body.home-future .nova-orbit-ring {
  position: absolute !important;
  inset: auto !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 189, 127, 0.24) !important;
  box-shadow: 0 0 36px rgba(255, 122, 84, 0.10), inset 0 0 26px rgba(124,247,212,0.045) !important;
  pointer-events: none !important;
}
body.home-future .nova-ring-outer { width: 100% !important; height: 100% !important; animation: novaOrbitSpin 28s linear infinite !important; }
body.home-future .nova-ring-mid { width: 74% !important; height: 74% !important; animation: novaOrbitSpin 18s linear infinite reverse !important; }
body.home-future .nova-ring-inner { width: 48% !important; height: 48% !important; border-color: rgba(124,247,212,0.22) !important; animation: novaOrbitSpin 12s linear infinite !important; }
body.home-future .nova-scan-line {
  position: absolute !important;
  width: 50% !important;
  height: 1px !important;
  left: 50% !important;
  top: 50% !important;
  transform-origin: 0 50% !important;
  background: linear-gradient(90deg, rgba(124,247,212,0.70), transparent) !important;
  box-shadow: 0 0 18px rgba(124,247,212,0.32) !important;
  animation: novaScanSweep 4.8s linear infinite !important;
}
body.home-future .nova-core-card {
  position: relative !important;
  z-index: 4 !important;
  width: min(255px, 72%) !important;
  min-height: 180px !important;
  padding: 22px 20px !important;
  border-radius: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,0.12), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.045)) !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  box-shadow: 0 24px 58px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(18px) !important;
  animation: novaCoreFloat 5.5s ease-in-out infinite !important;
}
body.home-future .nova-core-eyebrow {
  font-size: 0.76rem !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  color: #ffbe82 !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}
body.home-future .nova-core-card strong {
  display: block !important;
  font-size: clamp(2.05rem, 4vw, 3.05rem) !important;
  line-height: 0.95 !important;
  color: #fff4ec !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.04em !important;
}
body.home-future .nova-core-card small,
body.home-future .nova-core-card em {
  display: block !important;
  color: rgba(231, 238, 255, 0.74) !important;
  font-style: normal !important;
  line-height: 1.35 !important;
}
body.home-future .nova-core-card em {
  margin-top: 8px !important;
  font-size: 0.78rem !important;
  color: rgba(124,247,212,0.84) !important;
}
body.home-future .nova-chain-matrix {
  position: relative !important;
  z-index: 5 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 8px !important;
  width: 100% !important;
}
body.home-future .nova-chain-matrix span {
  min-width: 0 !important;
  padding: 10px 8px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  color: rgba(243,247,255,0.92) !important;
  font-size: clamp(0.72rem, 0.8vw, 0.86rem) !important;
  font-weight: 800 !important;
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.home-future .nova-chain-matrix b {
  color: #ffaf77 !important;
  font-size: 0.68em !important;
  letter-spacing: 0.10em !important;
}
body.home-future .nova-signal-row {
  position: relative !important;
  z-index: 5 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}
body.home-future .nova-signal-row div {
  min-width: 0 !important;
  padding: 13px 14px !important;
  border-radius: 18px !important;
  background: rgba(3, 8, 21, 0.62) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(12px) !important;
}
body.home-future .nova-signal-row span,
body.home-future .nova-signal-row strong {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
body.home-future .nova-signal-row span {
  color: rgba(220,230,255,0.64) !important;
  font-size: 0.76rem !important;
  margin-bottom: 4px !important;
}
body.home-future .nova-signal-row strong {
  color: #fff4ec !important;
  font-size: 0.88rem !important;
}
body.home-future.light-mode .nova-visual-panel,
body.light-mode .nova-visual-panel {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 143, 88, 0.15), transparent 31%),
    radial-gradient(circle at 78% 18%, rgba(41, 199, 163, 0.14), transparent 24%),
    radial-gradient(circle at 18% 88%, rgba(60, 104, 220, 0.12), transparent 28%),
    linear-gradient(150deg, rgba(255,255,255,0.96), rgba(239,244,255,0.94)) !important;
}
body.home-future.light-mode .nova-core-card,
body.light-mode .nova-core-card {
  background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,255,255,0.62)) !important;
  border-color: rgba(24, 45, 84, 0.12) !important;
  box-shadow: 0 22px 52px rgba(30, 52, 96, 0.18), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}
body.home-future.light-mode .nova-core-card strong,
body.light-mode .nova-core-card strong,
body.home-future.light-mode .nova-signal-row strong,
body.light-mode .nova-signal-row strong {
  color: #111a2f !important;
}
body.home-future.light-mode .nova-core-card small,
body.home-future.light-mode .nova-signal-row span,
body.light-mode .nova-core-card small,
body.light-mode .nova-signal-row span {
  color: rgba(40, 51, 78, 0.72) !important;
}
body.home-future.light-mode .nova-chain-matrix span,
body.light-mode .nova-chain-matrix span,
body.home-future.light-mode .nova-signal-row div,
body.light-mode .nova-signal-row div {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(25, 42, 76, 0.10) !important;
  color: #1a2641 !important;
}
@keyframes novaOrbitSpin { to { transform: rotate(360deg); } }
@keyframes novaScanSweep { to { transform: rotate(360deg); } }
@keyframes novaGridDrift { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 120px 0, 74px 0, 0 74px; } }
@keyframes novaPulseBeacon { 0%,100% { opacity: 0.36; transform: scale(0.88); } 50% { opacity: 0.9; transform: scale(1.08); } }
@keyframes novaAuroraShift { from { transform: rotate(-8deg) scale(0.96); opacity: 0.58; } to { transform: rotate(8deg) scale(1.06); opacity: 0.92; } }
@keyframes novaCoreFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 1120px) {
  body.home-future .aionex-innovation-shell {
    grid-template-columns: 1fr !important;
  }
  body.home-future .nova-visual-panel {
    max-width: 760px !important;
    margin-inline: auto !important;
  }
}
@media (max-width: 720px) {
  body.home-future .aionex-innovation-shell {
    padding: 18px !important;
    border-radius: 24px !important;
  }
  body.home-future .nova-visual-panel {
    min-height: auto !important;
    padding: 16px !important;
    border-radius: 22px !important;
  }
  body.home-future .nova-orbit-stage {
    width: min(285px, 84vw) !important;
  }
  body.home-future .nova-core-card {
    min-height: 150px !important;
    border-radius: 24px !important;
  }
  body.home-future .nova-chain-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.home-future .nova-chain-matrix span:last-child {
    grid-column: 1 / -1 !important;
  }
  body.home-future .nova-signal-row {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 430px) {
  body.home-future .nova-orbit-stage {
    width: min(245px, 82vw) !important;
  }
  body.home-future .nova-core-card strong {
    font-size: 2rem !important;
  }
  body.home-future .nova-chain-matrix {
    grid-template-columns: 1fr !important;
  }
  body.home-future .nova-chain-matrix span:last-child {
    grid-column: auto !important;
  }
}

/* ===== PLATFORM WIDE WIDTH + RESPONSIVE STABILITY PATCH V5 =====
   Restores premium desktop width while keeping mobile layouts safe. */
:root {
  --mf-page-max: 1480px;
  --mf-page-gutter: clamp(16px, 3.8vw, 56px);
}

.container,
body.home-future .container,
body:not(.beta-guide-page) main > .container {
  width: min(calc(100% - (var(--mf-page-gutter) * 2)), var(--mf-page-max)) !important;
  max-width: var(--mf-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body.home-future .hero-premium .container,
body.home-future .aionex-launch-block .container,
body.home-future .aionex-innovation-strip .container,
body.home-future .base-flow-strip .container {
  max-width: 1520px !important;
}

/* Header should not look compressed on desktop. */
.app-header {
  width: 100% !important;
  padding: 14px clamp(18px, 2.4vw, 42px) !important;
  gap: clamp(12px, 1.6vw, 26px) !important;
}
#mainNav {
  gap: clamp(14px, 1.6vw, 26px) !important;
}
#mainNav a,
.nav-parent-title {
  font-size: clamp(0.92rem, 0.72vw + 0.62rem, 1.02rem) !important;
}
.nav-parent-trigger {
  min-height: 48px !important;
  padding: 9px 15px !important;
}
.header-actions .btn,
.btn-connect,
.btn-disconnect,
.btn-theme {
  min-height: 42px;
}

/* Home page wide, balanced sections. */
body.home-future .hero-shell {
  grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr) !important;
  gap: clamp(36px, 5vw, 80px) !important;
}
body.home-future .hero-title {
  max-width: 13.5ch !important;
}
body.home-future .hero-subtitle,
body.home-future .base-inline-narrative {
  max-width: 820px !important;
}
body.home-future .hero-cta-row {
  grid-template-columns: repeat(4, max-content) !important;
  flex-wrap: wrap;
}
body.home-future .dashboard-panel,
body.home-future .agent-story-shell,
body.home-future .aionex-launch-shell,
body.home-future .aionex-innovation-shell,
body.home-future .base-flow-line,
body.home-future .chain-expansion-shell {
  width: 100% !important;
}

/* Fix AIONEX launch graphic clipping/cutting. */
body.home-future .aionex-launch-shell {
  grid-template-columns: minmax(0, 1.05fr) minmax(460px, 0.95fr) !important;
  gap: clamp(28px, 4.4vw, 72px) !important;
  overflow: visible !important;
}
body.home-future .aionex-launch-visual {
  min-width: 0 !important;
  width: 100% !important;
  min-height: clamp(430px, 33vw, 540px) !important;
  overflow: hidden !important;
  border-radius: 30px !important;
  padding: clamp(22px, 2.6vw, 36px) !important;
}
body.home-future .launch-visual-core {
  width: min(100%, 620px) !important;
  height: min(440px, 100%) !important;
  margin-inline: auto !important;
  transform: none !important;
}
body.home-future .launch-node {
  max-width: min(190px, 40%) !important;
  white-space: normal !important;
  line-height: 1.2 !important;
  text-align: center !important;
  padding: 10px 14px !important;
  z-index: 6 !important;
}
body.home-future .launch-node-a { left: 7% !important; top: 17% !important; }
body.home-future .launch-node-b { right: 7% !important; top: 20% !important; }
body.home-future .launch-node-c { left: 7% !important; bottom: 17% !important; }
body.home-future .launch-node-d { right: 7% !important; bottom: 17% !important; }
body.home-future .launch-core-chip {
  max-width: min(340px, 64%) !important;
  margin: 0 auto !important;
}

/* NOVA visual should never clip chain text. */
body.home-future .aionex-innovation-shell {
  grid-template-columns: minmax(0, 1.02fr) minmax(500px, 0.98fr) !important;
  overflow: visible !important;
}
body.home-future .nova-visual-panel {
  overflow: hidden !important;
  min-height: clamp(470px, 39vw, 560px) !important;
}
body.home-future .nova-chain-matrix {
  grid-template-columns: repeat(5, minmax(86px, 1fr)) !important;
  gap: 10px !important;
}
body.home-future .nova-chain-matrix span {
  overflow: visible !important;
  text-overflow: clip !important;
  min-height: 42px !important;
  font-size: clamp(0.72rem, 0.45vw + 0.62rem, 0.9rem) !important;
}

/* Wider app cards on functional pages without breaking mobile. */
.swap-layout,
.liquidity-layout,
.dex-layout,
.dashboard-grid,
.farm-grid,
.pools-container {
  max-width: 1480px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 1280px) {
  :root { --mf-page-gutter: clamp(16px, 2.8vw, 36px); }
  body.home-future .hero-shell,
  body.home-future .aionex-launch-shell,
  body.home-future .aionex-innovation-shell {
    gap: clamp(24px, 3vw, 44px) !important;
  }
  #mainNav { gap: 12px !important; }
  .nav-parent-trigger { padding: 8px 12px !important; }
}

@media (max-width: 1080px) {
  body.home-future .hero-shell,
  body.home-future .agent-story-shell,
  body.home-future .aionex-launch-shell,
  body.home-future .aionex-innovation-shell,
  body.home-future .chain-expansion-shell {
    grid-template-columns: 1fr !important;
  }
  body.home-future .hero-title { max-width: none !important; }
  body.home-future .hero-dashboard,
  body.home-future .aionex-launch-visual,
  body.home-future .nova-visual-panel {
    max-width: 820px !important;
    margin-inline: auto !important;
  }
}

@media (max-width: 980px) {
  .app-header { align-items: flex-start !important; }
  #mainNav {
    width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: thin;
    padding-bottom: 6px;
  }
  #mainNav > a,
  #mainNav > .nav-parent { flex: 0 0 auto !important; }
}

@media (max-width: 760px) {
  :root { --mf-page-gutter: 16px; }
  .container,
  body.home-future .container {
    width: calc(100% - 28px) !important;
  }
  body.home-future .hero-premium { padding-top: 58px !important; }
  body.home-future .hero-eyebrow-row,
  body.home-future .hero-cta-row,
  body.home-future .hero-signal-grid,
  body.home-future .panel-metric-grid,
  body.home-future .feature-grid-future {
    grid-template-columns: 1fr !important;
  }
  body.home-future .hero-title {
    font-size: clamp(2.35rem, 13vw, 4rem) !important;
    line-height: 1.02 !important;
  }
  body.home-future .aionex-launch-visual {
    min-height: 390px !important;
  }
  body.home-future .launch-core-chip {
    max-width: 72% !important;
    padding: 18px 16px !important;
  }
  body.home-future .launch-core-chip strong {
    font-size: clamp(2.2rem, 12vw, 3.3rem) !important;
  }
  body.home-future .launch-node {
    max-width: 150px !important;
    font-size: 0.78rem !important;
    padding: 8px 10px !important;
  }
  body.home-future .nova-chain-matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.home-future .nova-chain-matrix span:last-child { grid-column: 1 / -1 !important; }
  .app-header { padding-inline: 12px !important; }
}

@media (max-width: 460px) {
  .container,
  body.home-future .container { width: calc(100% - 20px) !important; }
  body.home-future .aionex-launch-visual { min-height: 360px !important; }
  body.home-future .launch-node-a { left: 4% !important; top: 12% !important; }
  body.home-future .launch-node-b { right: 4% !important; top: 14% !important; }
  body.home-future .launch-node-c { left: 4% !important; bottom: 11% !important; }
  body.home-future .launch-node-d { right: 4% !important; bottom: 11% !important; }
  body.home-future .nova-chain-matrix { grid-template-columns: 1fr !important; }
}

/* =========================================================
   MAPLEFI PREMIUM SCALE FIX v6
   Restores full desktop presence across all pages while keeping
   tablet/mobile layouts responsive and light/dark compatible.
   ========================================================= */
@media (min-width: 1025px) {
  :root {
    --mf-page-max: 1680px;
    --mf-page-gutter: clamp(28px, 4vw, 74px);
  }

  html { font-size: 17px; }
  body { font-size: 1rem; }

  .container,
  body.home-future .container,
  body:not(.beta-guide-page) main > .container,
  .team-container,
  .guide-container {
    width: min(calc(100% - (var(--mf-page-gutter) * 2)), var(--mf-page-max)) !important;
    max-width: var(--mf-page-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .main-content .container,
  body.swap-page .main-content .container,
  body.liquidity-page .main-content .container {
    width: min(calc(100% - (var(--mf-page-gutter) * 2)), 1540px) !important;
    max-width: 1540px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .app-header {
    min-height: 72px !important;
    padding: 14px clamp(24px, 2.8vw, 56px) !important;
    gap: clamp(18px, 2vw, 34px) !important;
  }

  .logo-container img {
    width: clamp(116px, 9vw, 156px) !important;
    max-width: none !important;
  }

  #mainNav,
  .nav {
    gap: clamp(18px, 1.55vw, 30px) !important;
    align-items: center !important;
  }

  #mainNav > a,
  #mainNav .nav-parent-title,
  .nav a,
  .nav-parent-title {
    font-size: clamp(0.96rem, 0.2vw + 0.88rem, 1.12rem) !important;
    line-height: 1.2 !important;
    font-weight: 750 !important;
    white-space: nowrap !important;
  }

  .nav-parent-trigger,
  .chain-switcher-trigger,
  .btn-connect,
  .btn-disconnect,
  .btn-theme {
    min-height: 48px !important;
    font-size: 0.98rem !important;
  }

  .nav-parent-trigger {
    padding: 10px 18px !important;
    border-radius: 18px !important;
  }

  .chain-switcher { min-width: 270px !important; }
  .chain-switcher-trigger { padding: 9px 17px !important; }

  .chain-ai-spotlight-inner,
  .maple-agent-strip-inner {
    width: min(calc(100% - (var(--mf-page-gutter) * 2)), 1540px) !important;
    max-width: 1540px !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .chain-ai-copy strong,
  .maple-agent-copy strong { font-size: clamp(1.08rem, 0.5vw + 0.9rem, 1.45rem) !important; }
  .chain-ai-copy p,
  .maple-agent-copy p { font-size: clamp(0.94rem, 0.25vw + 0.86rem, 1.08rem) !important; }

  /* Home page: full-width VC/pitch deck scale. */
  body.home-future .hero-premium {
    padding-top: clamp(92px, 9vw, 150px) !important;
    padding-bottom: clamp(86px, 8vw, 136px) !important;
  }

  body.home-future .hero-premium .container,
  body.home-future .agent-story-section .container,
  body.home-future .aionex-launch-block .container,
  body.home-future .aionex-innovation-strip .container,
  body.home-future .base-flow-strip .container,
  body.home-future .tokenomics .container,
  body.home-future .roadmap .container,
  body.home-future .faq .container,
  body.home-future .contact-us .container {
    max-width: 1640px !important;
  }

  body.home-future .hero-shell {
    grid-template-columns: minmax(0, 1.18fr) minmax(500px, 0.82fr) !important;
    gap: clamp(54px, 7vw, 120px) !important;
    align-items: center !important;
  }

  body.home-future .hero-copy { max-width: 900px !important; }
  body.home-future .hero-title {
    font-size: clamp(4.4rem, 5.6vw, 7.6rem) !important;
    line-height: 0.92 !important;
    max-width: 12.2ch !important;
    letter-spacing: -0.075em !important;
  }
  body.home-future .hero-title-aionex .hero-title-rest { font-size: 0.74em !important; }
  body.home-future .hero-subtitle {
    max-width: 880px !important;
    font-size: clamp(1.08rem, 0.45vw + 0.95rem, 1.38rem) !important;
    line-height: 1.75 !important;
  }

  body.home-future .dashboard-panel {
    max-width: 620px !important;
    padding: clamp(26px, 2.4vw, 42px) !important;
    border-radius: 34px !important;
  }
  body.home-future .panel-metric-grid { gap: 16px !important; }
  body.home-future .metric-card,
  body.home-future .terminal-card,
  body.home-future .signal-card,
  body.home-future .feature-card,
  body.home-future .ai-card,
  body.home-future .tokenomics-card {
    padding: clamp(18px, 1.7vw, 26px) !important;
  }

  body.home-future .agent-story-shell,
  body.home-future .aionex-launch-shell,
  body.home-future .aionex-innovation-shell,
  body.home-future .chain-expansion-shell {
    max-width: 1640px !important;
    padding: clamp(42px, 4.4vw, 78px) !important;
    border-radius: 36px !important;
  }

  body.home-future .agent-story-title,
  body.home-future .aionex-launch-copy h2,
  body.home-future .aionex-innovation-copy h2,
  body.home-future .section-intro h2 {
    font-size: clamp(2.8rem, 3.4vw, 5.15rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.055em !important;
  }

  body.home-future .agent-story-copy,
  body.home-future .aionex-launch-copy p,
  body.home-future .aionex-innovation-copy p,
  body.home-future .section-intro p {
    font-size: clamp(1rem, 0.35vw + 0.92rem, 1.24rem) !important;
    line-height: 1.78 !important;
  }

  body.home-future .agent-story-shell,
  body.home-future .aionex-launch-shell,
  body.home-future .aionex-innovation-shell {
    grid-template-columns: minmax(0, 1fr) minmax(540px, 0.9fr) !important;
    gap: clamp(42px, 5vw, 90px) !important;
  }

  body.home-future .agent-visual-panel,
  body.home-future .aionex-launch-visual,
  body.home-future .aionex-innovation-visual,
  body.home-future .nova-visual-panel {
    min-height: clamp(480px, 37vw, 660px) !important;
  }

  body.home-future section {
    padding-top: clamp(80px, 7vw, 128px) !important;
    padding-bottom: clamp(80px, 7vw, 128px) !important;
  }

  /* Functional pages: larger command-center feel. */
  .swap-command-grid,
  .liquidity-dashboard-grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(430px, 0.72fr) !important;
    gap: clamp(28px, 3.4vw, 54px) !important;
    max-width: 1540px !important;
    width: 100% !important;
  }

  .swap-ai-monitor,
  .ai-monitor-panel {
    padding: clamp(28px, 3vw, 44px) !important;
    border-radius: 36px !important;
    min-height: 580px !important;
  }
  .swap-ai-monitor h2,
  .ai-monitor-panel h2,
  .ai-monitor-title,
  .swap-ai-title {
    font-size: clamp(2.4rem, 2.5vw, 4rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.055em !important;
  }
  .swap-ai-monitor p,
  .ai-monitor-panel p {
    font-size: clamp(1rem, 0.35vw + 0.92rem, 1.18rem) !important;
  }

  .swap-command-grid > .swap-card,
  .liquidity-dashboard-grid > .liquidity-card,
  .swap-card,
  .liquidity-card,
  .wrap-card {
    max-width: none !important;
    padding: clamp(30px, 2.7vw, 46px) !important;
    border-radius: 32px !important;
  }
  .swap-card h1,
  .swap-card h2,
  .liquidity-card h1,
  .liquidity-card h2 {
    font-size: clamp(2rem, 1.35vw + 1.55rem, 3rem) !important;
    letter-spacing: -0.04em !important;
  }
  .input-wrapper { min-height: 64px !important; border-radius: 18px !important; }
  .input-wrapper input { font-size: 1.25rem !important; padding: 19px 20px !important; }
  .token-select { min-width: 150px !important; justify-content: center !important; padding: 0 18px !important; }
  .token-select span { font-size: 1.02rem !important; font-weight: 800 !important; }
  .btn, .swap-card button, .liquidity-card button { min-height: 54px; font-size: 1rem; }

  /* Team page: use the whole screen instead of a narrow strip. */
  body.team-page .team-container { max-width: 1540px !important; }
  body.team-page .team-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(460px, .95fr) !important; }
  body.team-page .team-title,
  body.team-page .team-hero h1 {
    font-size: clamp(4rem, 5vw, 7.2rem) !important;
    line-height: .92 !important;
  }
  body.team-page .team-copy,
  body.team-page .team-hero p { font-size: clamp(1.05rem, .35vw + .95rem, 1.28rem) !important; }
  body.team-page .team-grid,
  body.team-page .team-members-grid { gap: clamp(24px, 2.6vw, 44px) !important; }

  /* Beta guide desktop scale. */
  body.beta-guide-page .guide-container { max-width: 1540px !important; }
  body.beta-guide-page .guide-hero-title,
  body.beta-guide-page h1 { font-size: clamp(3.6rem, 4.6vw, 6.4rem) !important; line-height: .94 !important; }
  body.beta-guide-page .guide-tabs-card { border-radius: 34px !important; }
  body.beta-guide-page .tab-panel { gap: clamp(28px, 3vw, 48px) !important; }
}

@media (min-width: 1281px) and (max-width: 1500px) {
  :root { --mf-page-gutter: clamp(24px, 3vw, 48px); }
  .app-header { gap: 14px !important; padding-inline: 24px !important; }
  #mainNav, .nav { gap: 14px !important; }
  #mainNav > a, #mainNav .nav-parent-title, .nav a { font-size: .94rem !important; }
  .chain-switcher { min-width: 230px !important; }
  .btn-connect, .btn-disconnect, .btn-theme { font-size: .88rem !important; }
}

@media (max-width: 1024px) {
  html { font-size: 16px; }
  .container,
  body.home-future .container,
  body:not(.beta-guide-page) main > .container,
  .team-container,
  .guide-container {
    width: min(calc(100% - 32px), 100%) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .swap-command-grid,
  .liquidity-dashboard-grid,
  body.home-future .hero-shell,
  body.home-future .agent-story-shell,
  body.home-future .aionex-launch-shell,
  body.home-future .aionex-innovation-shell,
  body.team-page .team-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .swap-command-grid > .swap-card,
  .liquidity-dashboard-grid > .liquidity-card {
    position: relative !important;
    top: auto !important;
  }
}

/* ==========================================================
   MapleFi final responsive design-system pass — 2026-05-14
   Purpose: fix over-compressed desktop scale, balanced cards,
   readable header, consistent pages, and safe mobile behavior.
   ========================================================== */
:root {
  --mf-shell: min(1480px, calc(100vw - 56px));
  --mf-shell-wide: min(1580px, calc(100vw - 56px));
  --mf-shell-tight: min(1220px, calc(100vw - 56px));
  --mf-radius-xl: 34px;
  --mf-radius-lg: 24px;
  --mf-card-pad: clamp(24px, 2vw, 38px);
}

html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* Global shell width: confident desktop width, safe mobile gutters. */
.container,
.team-container,
.guide-container,
body.home-future .container,
body.beta-guide-page .guide-container,
body.team-page .team-container {
  width: var(--mf-shell) !important;
  max-width: var(--mf-shell) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Header: stronger visual weight without breaking laptop/tablet. */
.app-header {
  min-height: 74px !important;
  padding: 12px clamp(22px, 2.4vw, 42px) !important;
  gap: clamp(14px, 1.2vw, 28px) !important;
  backdrop-filter: blur(18px) saturate(1.15);
}
.logo-container { flex: 0 0 auto !important; min-width: max-content !important; }
.logo-container img,
#logo {
  width: auto !important;
  height: clamp(34px, 2.15vw, 46px) !important;
  max-width: 180px !important;
  object-fit: contain !important;
  display: block !important;
}
.nav,
#mainNav {
  align-items: center !important;
  gap: clamp(14px, 1.25vw, 26px) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.nav a,
#mainNav > a,
#mainNav .nav-parent-title {
  font-size: clamp(.95rem, .28vw + .86rem, 1.08rem) !important;
  line-height: 1.1 !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}
.header-actions,
.header-right,
.wallet-actions {
  align-items: center !important;
  gap: 12px !important;
}
.chain-switcher { min-width: clamp(238px, 16vw, 315px) !important; }
.chain-switcher-trigger,
.btn-connect,
.btn-disconnect,
.btn-theme,
.wallet-chip,
.network-chip {
  min-height: 44px !important;
  border-radius: 15px !important;
  font-size: clamp(.88rem, .2vw + .82rem, 1rem) !important;
  font-weight: 800 !important;
}
.chain-switcher-trigger { padding: 9px 16px !important; }

/* NOVA/AIONEX strip should feel like an intelligence layer, not a tiny banner. */
.maple-agent-strip,
.chain-ai-spotlight {
  border-top: 1px solid rgba(255,255,255,.06) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.maple-agent-strip-inner,
.chain-ai-spotlight-inner {
  width: var(--mf-shell-wide) !important;
  max-width: var(--mf-shell-wide) !important;
  min-height: 86px !important;
  padding: clamp(18px, 1.8vw, 28px) 0 !important;
  gap: clamp(18px, 2vw, 36px) !important;
}
.maple-agent-copy strong,
.chain-ai-copy strong {
  font-size: clamp(1.1rem, .55vw + .92rem, 1.45rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -.01em !important;
}
.maple-agent-copy p,
.chain-ai-copy p {
  font-size: clamp(.94rem, .26vw + .84rem, 1.08rem) !important;
  line-height: 1.55 !important;
}
.maple-agent-icon,
.chain-ai-icon {
  width: clamp(52px, 3.5vw, 66px) !important;
  height: clamp(52px, 3.5vw, 66px) !important;
  flex: 0 0 auto !important;
}

/* Home: balanced premium pitch layout, no tiny center strip. */
body.home-future .hero-premium {
  padding-top: clamp(78px, 7vw, 126px) !important;
  padding-bottom: clamp(72px, 7vw, 124px) !important;
}
body.home-future .hero-shell {
  width: 100% !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr) !important;
  gap: clamp(44px, 6vw, 96px) !important;
  align-items: center !important;
}
body.home-future .hero-copy { max-width: 780px !important; }
body.home-future .hero-title {
  font-size: clamp(4rem, 5.45vw, 6.85rem) !important;
  line-height: .93 !important;
  letter-spacing: -.072em !important;
  max-width: 12.8ch !important;
}
body.home-future .hero-subtitle {
  max-width: 760px !important;
  font-size: clamp(1.02rem, .35vw + .94rem, 1.24rem) !important;
  line-height: 1.75 !important;
}
body.home-future .dashboard-panel,
body.home-future .agent-visual-panel,
body.home-future .aionex-launch-visual,
body.home-future .aionex-innovation-visual,
body.home-future .nova-visual-panel {
  width: 100% !important;
  max-width: 650px !important;
}
body.home-future .dashboard-panel { justify-self: end !important; }
body.home-future section {
  padding-top: clamp(74px, 6.3vw, 112px) !important;
  padding-bottom: clamp(74px, 6.3vw, 112px) !important;
}
body.home-future .agent-story-shell,
body.home-future .aionex-launch-shell,
body.home-future .aionex-innovation-shell,
body.home-future .chain-expansion-shell {
  width: 100% !important;
  max-width: var(--mf-shell) !important;
  grid-template-columns: minmax(0, 1fr) minmax(430px, .92fr) !important;
  gap: clamp(34px, 4.6vw, 78px) !important;
  padding: clamp(36px, 4vw, 66px) !important;
  border-radius: var(--mf-radius-xl) !important;
}
body.home-future .agent-story-title,
body.home-future .aionex-launch-copy h2,
body.home-future .aionex-innovation-copy h2,
body.home-future .section-intro h2 {
  font-size: clamp(2.45rem, 3.35vw, 4.65rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.055em !important;
}
body.home-future .agent-story-copy,
body.home-future .aionex-launch-copy p,
body.home-future .aionex-innovation-copy p,
body.home-future .section-intro p,
body.home-future .feature-card p,
body.home-future .ai-card p {
  font-size: clamp(.98rem, .25vw + .9rem, 1.13rem) !important;
  line-height: 1.7 !important;
}
body.home-future .feature-grid,
body.home-future .ai-grid,
body.home-future .tokenomics-grid,
body.home-future .roadmap-grid {
  gap: clamp(18px, 1.65vw, 30px) !important;
}

/* Swap / Liquidity: better desktop balance and larger readable forms. */
.swap-command-grid,
.liquidity-dashboard-grid {
  width: var(--mf-shell) !important;
  max-width: var(--mf-shell) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  grid-template-columns: minmax(0, 1.14fr) minmax(420px, .72fr) !important;
  gap: clamp(30px, 3.4vw, 58px) !important;
  align-items: start !important;
}
.swap-ai-monitor,
.ai-monitor-panel {
  min-height: 0 !important;
  padding: clamp(28px, 2.7vw, 42px) !important;
  border-radius: var(--mf-radius-xl) !important;
}
.swap-ai-monitor h2,
.ai-monitor-panel h2,
.swap-ai-title,
.ai-monitor-title {
  font-size: clamp(2.25rem, 2.45vw, 3.75rem) !important;
  line-height: 1.04 !important;
}
.swap-command-grid > .swap-card,
.liquidity-dashboard-grid > .liquidity-card,
.swap-card,
.liquidity-card,
.wrap-card {
  width: 100% !important;
  max-width: 560px !important;
  justify-self: stretch !important;
  padding: clamp(28px, 2.5vw, 42px) !important;
  border-radius: 30px !important;
}
.swap-card h1,
.swap-card h2,
.liquidity-card h1,
.liquidity-card h2 {
  font-size: clamp(2.15rem, 1.25vw + 1.6rem, 3rem) !important;
  line-height: 1.08 !important;
}
.input-wrapper {
  min-height: 62px !important;
  border-radius: 18px !important;
}
.input-wrapper input {
  font-size: clamp(1.05rem, .45vw + .92rem, 1.28rem) !important;
  padding: 17px 18px !important;
}
.token-select {
  min-width: 142px !important;
  max-width: 172px !important;
  padding-inline: 15px !important;
}
.token-select span,
.selected-token-symbol,
.token-symbol { font-size: 1rem !important; font-weight: 900 !important; }

/* Team page: fix huge role text and make cards professional again. */
body.team-page .team-container { width: min(1320px, calc(100vw - 56px)) !important; max-width: 1320px !important; }
body.team-page .team-hero { padding-top: clamp(72px, 7vw, 122px) !important; padding-bottom: clamp(58px, 6vw, 98px) !important; }
body.team-page .team-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(430px, .86fr) !important; gap: clamp(40px, 5.5vw, 88px) !important; }
body.team-page .team-hero h1 {
  font-size: clamp(3.6rem, 5.25vw, 6.7rem) !important;
  line-height: .93 !important;
  letter-spacing: -.075em !important;
}
/* Important: .team-title is a role/description, not a page headline. */
body.team-page .team-title {
  font-size: clamp(1rem, .3vw + .92rem, 1.18rem) !important;
  line-height: 1.45 !important;
  letter-spacing: -.015em !important;
  color: var(--team-muted) !important;
  font-weight: 850 !important;
  max-width: 720px !important;
}
body.team-page .team-content h3 {
  font-size: clamp(1.85rem, 1.5vw + 1.25rem, 2.7rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.055em !important;
}
body.team-page .team-member:not(.lead) .team-content h3 {
  font-size: clamp(1.65rem, 1vw + 1.25rem, 2.25rem) !important;
}
body.team-page .team-bio {
  font-size: clamp(.94rem, .14vw + .89rem, 1.02rem) !important;
  line-height: 1.68 !important;
}
body.team-page .team-member.lead .team-bio { font-size: clamp(.98rem, .18vw + .9rem, 1.07rem) !important; }
body.team-page .team-roster { gap: clamp(24px, 2.2vw, 34px) !important; }
body.team-page .team-member { border-radius: 30px !important; }
body.team-page .team-member.lead .team-card-inner { grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr) !important; }
body.team-page .team-photo-frame { min-height: clamp(340px, 28vw, 450px) !important; }
body.team-page .team-member:not(.lead) .team-photo-frame { min-height: clamp(300px, 22vw, 380px) !important; }
body.team-page .team-content { padding: clamp(22px, 2.4vw, 34px) !important; }
body.team-page .team-expertise-tags span { font-size: .76rem !important; line-height: 1.15 !important; }
body.team-page .social-btn,
body.team-page .profile-chip { font-size: .82rem !important; min-height: 40px !important; }
body.team-page .team-heading h2,
body.team-page .team-split h2 {
  font-size: clamp(2.3rem, 3.5vw, 4.4rem) !important;
  line-height: 1.03 !important;
}

/* Dashboard / leaderboard / farming general readability safeguards. */
.dashboard-hero,
.dashboard-grid,
.farming-hero,
.pools-container,
.leaderboard-container,
.faucet-container,
.wrap-container,
.main-content > .container {
  max-width: var(--mf-shell) !important;
}
.card,
.dashboard-card,
.pool-card,
.leaderboard-card,
.faucet-card {
  border-radius: var(--mf-radius-lg) !important;
}

/* Beta guide: tab content stays in readable columns on desktop and mobile. */
body.beta-guide-page .guide-container { width: min(1340px, calc(100vw - 56px)) !important; max-width: 1340px !important; }
body.beta-guide-page .guide-hero-title,
body.beta-guide-page h1 {
  font-size: clamp(3rem, 4.2vw, 5.75rem) !important;
  line-height: .98 !important;
  letter-spacing: -.06em !important;
}
body.beta-guide-page .tab-panel,
body.beta-guide-page .guide-tab-panel,
body.beta-guide-page .mission-tab-panel {
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr) !important;
  gap: clamp(24px, 3vw, 42px) !important;
}
body.beta-guide-page .step-card,
body.beta-guide-page .mission-step,
body.beta-guide-page .guide-step {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  column-gap: 18px !important;
  align-items: start !important;
  padding: clamp(18px, 1.6vw, 26px) !important;
  overflow-wrap: anywhere !important;
}
body.beta-guide-page .step-card > *:not(.step-number):not(.mission-step-number):not(.guide-step-number),
body.beta-guide-page .mission-step > *:not(.step-number):not(.mission-step-number):not(.guide-step-number),
body.beta-guide-page .guide-step > *:not(.step-number):not(.mission-step-number):not(.guide-step-number) {
  grid-column: 2 !important;
  min-width: 0 !important;
}
body.beta-guide-page .step-number,
body.beta-guide-page .mission-step-number,
body.beta-guide-page .guide-step-number {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  width: 44px !important;
  height: 44px !important;
}
body.beta-guide-page .step-card p,
body.beta-guide-page .mission-step p,
body.beta-guide-page .guide-step p {
  max-width: 100% !important;
  line-height: 1.65 !important;
  white-space: normal !important;
}

/* Responsive behavior. */
@media (max-width: 1280px) {
  :root { --mf-shell: min(1180px, calc(100vw - 40px)); --mf-shell-wide: min(1180px, calc(100vw - 40px)); }
  .app-header { min-height: 68px !important; padding-inline: 18px !important; gap: 12px !important; }
  .nav, #mainNav { gap: 12px !important; }
  .nav a, #mainNav > a, #mainNav .nav-parent-title { font-size: .9rem !important; }
  .chain-switcher { min-width: 218px !important; }
  body.home-future .hero-shell,
  body.home-future .agent-story-shell,
  body.home-future .aionex-launch-shell,
  body.home-future .aionex-innovation-shell,
  .swap-command-grid,
  .liquidity-dashboard-grid,
  body.team-page .team-hero-grid {
    grid-template-columns: 1fr !important;
  }
  body.home-future .dashboard-panel,
  body.home-future .agent-visual-panel,
  body.home-future .aionex-launch-visual,
  body.home-future .aionex-innovation-visual,
  body.home-future .nova-visual-panel,
  .swap-command-grid > .swap-card,
  .liquidity-dashboard-grid > .liquidity-card,
  .swap-card,
  .liquidity-card {
    max-width: 760px !important;
    justify-self: center !important;
  }
  .swap-command-grid,
  .liquidity-dashboard-grid { width: min(980px, calc(100vw - 40px)) !important; max-width: 980px !important; }
  body.team-page .team-member.lead .team-card-inner { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  :root { --mf-shell: min(100%, calc(100vw - 28px)); --mf-shell-wide: min(100%, calc(100vw - 28px)); }
  .app-header { min-height: 64px !important; }
  .logo-container img, #logo { height: 32px !important; }
  .maple-agent-strip-inner,
  .chain-ai-spotlight-inner { width: var(--mf-shell) !important; flex-direction: column !important; align-items: flex-start !important; min-height: 0 !important; }
  body.home-future .hero-title { font-size: clamp(3rem, 14vw, 4.9rem) !important; max-width: 11.8ch !important; }
  body.home-future .hero-premium { padding-top: 54px !important; }
  body.home-future .agent-story-shell,
  body.home-future .aionex-launch-shell,
  body.home-future .aionex-innovation-shell,
  body.home-future .chain-expansion-shell { padding: 24px !important; border-radius: 26px !important; }
  body.team-page .team-container,
  body.beta-guide-page .guide-container { width: min(100%, calc(100vw - 28px)) !important; max-width: min(100%, calc(100vw - 28px)) !important; }
  body.team-page .team-hero h1 { font-size: clamp(3rem, 14vw, 4.6rem) !important; }
  body.team-page .team-member.feature,
  body.team-page .team-member { grid-column: span 12 !important; }
  body.beta-guide-page .tab-panel,
  body.beta-guide-page .guide-tab-panel,
  body.beta-guide-page .mission-tab-panel { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  :root { --mf-shell: min(100%, calc(100vw - 20px)); --mf-shell-wide: min(100%, calc(100vw - 20px)); }
  .container,
  .team-container,
  .guide-container { width: var(--mf-shell) !important; max-width: var(--mf-shell) !important; }
  .app-header { padding-inline: 10px !important; }
  .logo-container img, #logo { height: 28px !important; max-width: 122px !important; }
  body.home-future .hero-title { font-size: clamp(2.55rem, 15vw, 3.6rem) !important; }
  body.home-future .hero-subtitle,
  body.team-page .team-hero p { font-size: .98rem !important; line-height: 1.65 !important; }
  body.home-future .agent-story-title,
  body.home-future .aionex-launch-copy h2,
  body.home-future .aionex-innovation-copy h2,
  body.home-future .section-intro h2,
  body.team-page .team-heading h2,
  body.team-page .team-split h2 { font-size: clamp(2.05rem, 10vw, 3rem) !important; }
  .swap-command-grid,
  .liquidity-dashboard-grid { width: var(--mf-shell) !important; max-width: var(--mf-shell) !important; }
  .swap-ai-monitor,
  .ai-monitor-panel,
  .swap-card,
  .liquidity-card,
  .wrap-card { padding: 20px !important; border-radius: 24px !important; }
  .token-select { min-width: 118px !important; max-width: 132px !important; padding-inline: 10px !important; }
  body.beta-guide-page .step-card,
  body.beta-guide-page .mission-step,
  body.beta-guide-page .guide-step { grid-template-columns: 44px minmax(0, 1fr) !important; column-gap: 12px !important; }
  body.beta-guide-page .step-number,
  body.beta-guide-page .mission-step-number,
  body.beta-guide-page .guide-step-number { width: 36px !important; height: 36px !important; }
}


/* ==========================================================
   MAPLEFI PRODUCTION LAYOUT RESET v7 — final cross-page scale
   Goals:
   - make NOVA-01 panel full and readable on every page
   - restore premium desktop width on home, swap, liquidity, team, beta guide
   - prevent clipped orbit/text graphics
   - keep tablet/mobile responsive and light/dark compatible
   ========================================================== */
:root {
  --mf-pro-shell: min(1560px, calc(100vw - 48px));
  --mf-pro-shell-wide: min(1680px, calc(100vw - 48px));
  --mf-pro-shell-mid: min(1320px, calc(100vw - 48px));
  --mf-pro-panel: rgba(19, 22, 36, 0.86);
  --mf-pro-panel-border: rgba(255,255,255,.115);
}

html { font-size: 16px; }
body { min-width: 320px; overflow-x: hidden; }

.container,
.team-container,
.guide-container,
.main-content > .container,
body.home-future .container,
body.team-page .team-container,
body.beta-guide-page .guide-container {
  width: var(--mf-pro-shell) !important;
  max-width: var(--mf-pro-shell) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Header: readable but not cramped. */
.app-header {
  min-height: 76px !important;
  padding: 13px clamp(18px, 2.1vw, 42px) !important;
  gap: clamp(14px, 1.4vw, 28px) !important;
  display: flex !important;
  align-items: center !important;
}
.logo-container { flex: 0 0 auto !important; min-width: max-content !important; }
.logo-container img,
#logo {
  height: clamp(34px, 2vw, 44px) !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
}
#mainNav,
.nav {
  display: flex !important;
  align-items: center !important;
  gap: clamp(13px, 1.05vw, 23px) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
#mainNav > a,
#mainNav .nav-parent-title,
.nav a,
.nav-parent-title {
  font-size: clamp(.9rem, .24vw + .82rem, 1.02rem) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  letter-spacing: -.012em !important;
  white-space: nowrap !important;
}
.nav-parent-trigger,
.chain-switcher-trigger,
.btn-connect,
.btn-disconnect,
.btn-theme {
  min-height: 44px !important;
  border-radius: 16px !important;
  font-size: clamp(.82rem, .18vw + .78rem, .95rem) !important;
  font-weight: 850 !important;
}
.nav-parent-trigger { padding: 9px 16px !important; }
.header-actions { display: flex !important; align-items: center !important; gap: 10px !important; flex: 0 0 auto !important; }
.chain-switcher { min-width: clamp(220px, 15vw, 300px) !important; }
.chain-switcher-trigger { padding: 9px 15px !important; }
.chain-switcher-value { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* NOVA panel: consistent on every page, never clipped. */
.maple-agent-strip {
  position: relative !important;
  z-index: 18 !important;
  padding: clamp(14px, 1.2vw, 22px) 0 !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(255, 109, 69, .20), transparent 30%),
    radial-gradient(circle at 82% 50%, rgba(36, 214, 160, .18), transparent 32%),
    linear-gradient(98deg, rgba(18, 16, 29, .97), rgba(13, 22, 38, .97) 54%, rgba(17, 30, 33, .97)) !important;
  border-top: 1px solid rgba(255,255,255,.075) !important;
  border-bottom: 1px solid rgba(255,255,255,.095) !important;
}
.maple-agent-strip-inner {
  width: var(--mf-pro-shell-wide) !important;
  max-width: var(--mf-pro-shell-wide) !important;
  min-height: 104px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(18px, 2.3vw, 42px) !important;
  padding: clamp(16px, 1.4vw, 24px) clamp(18px, 1.8vw, 32px) !important;
  margin: 0 auto !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 28px !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    rgba(11, 15, 27, .58) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
.maple-agent-avatar {
  width: clamp(54px, 4.2vw, 72px) !important;
  height: clamp(54px, 4.2vw, 72px) !important;
  border-radius: 23px !important;
  flex: 0 0 auto !important;
}
.maple-agent-avatar span { font-size: clamp(.78rem, .3vw + .72rem, .98rem) !important; }
.maple-agent-copy { min-width: 0 !important; overflow: visible !important; }
.maple-agent-kicker {
  font-size: clamp(.7rem, .15vw + .64rem, .82rem) !important;
  letter-spacing: .14em !important;
  margin-bottom: 6px !important;
  white-space: normal !important;
}
.maple-agent-copy strong {
  display: block !important;
  font-size: clamp(1.15rem, .62vw + .94rem, 1.6rem) !important;
  line-height: 1.24 !important;
  color: var(--text) !important;
  letter-spacing: -.025em !important;
  max-width: 980px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.maple-agent-copy p {
  display: block !important;
  margin-top: 6px !important;
  font-size: clamp(.94rem, .24vw + .86rem, 1.08rem) !important;
  line-height: 1.56 !important;
  color: var(--muted) !important;
  max-width: 900px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
.maple-agent-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  min-width: 260px !important;
  max-width: 430px !important;
}
.maple-agent-chip,
.maple-agent-link {
  min-height: 40px !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  font-size: clamp(.72rem, .14vw + .68rem, .84rem) !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}
body.light-mode .maple-agent-strip {
  background:
    radial-gradient(circle at 8% 50%, rgba(255, 109, 69, .16), transparent 30%),
    radial-gradient(circle at 82% 50%, rgba(14, 165, 233, .14), transparent 32%),
    linear-gradient(98deg, rgba(255,255,255,.98), rgba(243,248,255,.96) 58%, rgba(239,253,246,.95)) !important;
  border-color: rgba(15,23,42,.08) !important;
}
body.light-mode .maple-agent-strip-inner {
  background: linear-gradient(120deg, rgba(255,255,255,.86), rgba(255,255,255,.62)) !important;
  border-color: rgba(15,23,42,.10) !important;
  box-shadow: 0 22px 55px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* Chain spotlight: match the same readable width. */
.chain-ai-spotlight-inner {
  width: var(--mf-pro-shell-wide) !important;
  max-width: var(--mf-pro-shell-wide) !important;
  min-height: 116px !important;
  padding: clamp(22px, 2.2vw, 34px) clamp(22px, 2.2vw, 34px) !important;
  gap: clamp(20px, 3vw, 52px) !important;
}
.chain-ai-copy strong { font-size: clamp(1.42rem, 1vw + 1.05rem, 2.35rem) !important; line-height: 1.16 !important; }
.chain-ai-copy p { font-size: clamp(.98rem, .28vw + .9rem, 1.16rem) !important; line-height: 1.58 !important; max-width: 760px !important; }

/* Home page: restore full desktop presence and clean graphics. */
body.home-future .hero-premium { padding-top: clamp(86px, 6.5vw, 128px) !important; padding-bottom: clamp(86px, 6vw, 122px) !important; }
body.home-future .hero-premium .container,
body.home-future .agent-story-section .container,
body.home-future .aionex-launch-block .container,
body.home-future .aionex-innovation-strip .container,
body.home-future .chain-expansion-section .container,
body.home-future .base-flow-strip .container,
body.home-future .tokenomics .container,
body.home-future .roadmap .container,
body.home-future .faq .container,
body.home-future .contact-us .container {
  width: var(--mf-pro-shell) !important;
  max-width: var(--mf-pro-shell) !important;
}
body.home-future .hero-shell {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(500px, .92fr) !important;
  gap: clamp(48px, 6vw, 104px) !important;
  align-items: center !important;
}
body.home-future .hero-copy { max-width: 790px !important; }
body.home-future .hero-title {
  font-size: clamp(4.15rem, 5vw, 7rem) !important;
  line-height: .93 !important;
  letter-spacing: -.074em !important;
  max-width: 12.4ch !important;
}
body.home-future .hero-title-aionex .hero-title-rest { font-size: .76em !important; }
body.home-future .hero-subtitle {
  max-width: 760px !important;
  font-size: clamp(1.03rem, .34vw + .94rem, 1.24rem) !important;
  line-height: 1.72 !important;
}
body.home-future .hero-cta-row { gap: 12px !important; flex-wrap: wrap !important; }
body.home-future .hero-cta-row .btn { min-height: 48px !important; padding-inline: 20px !important; font-size: .95rem !important; }
body.home-future .dashboard-panel {
  width: 100% !important;
  max-width: 620px !important;
  justify-self: end !important;
  padding: clamp(26px, 2.2vw, 38px) !important;
  border-radius: 32px !important;
}
body.home-future section { padding-top: clamp(76px, 6.2vw, 116px) !important; padding-bottom: clamp(76px, 6.2vw, 116px) !important; }
body.home-future .agent-story-shell,
body.home-future .aionex-launch-shell,
body.home-future .aionex-innovation-shell,
body.home-future .chain-expansion-shell {
  width: 100% !important;
  max-width: var(--mf-pro-shell) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(500px, .92fr) !important;
  gap: clamp(38px, 5vw, 86px) !important;
  align-items: center !important;
  padding: clamp(40px, 4vw, 70px) !important;
  border-radius: 36px !important;
  overflow: hidden !important;
}
body.home-future .agent-story-title,
body.home-future .aionex-launch-copy h2,
body.home-future .aionex-innovation-copy h2,
body.home-future .section-intro h2 {
  font-size: clamp(2.65rem, 3.35vw, 4.85rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.058em !important;
}
body.home-future .agent-story-copy,
body.home-future .aionex-launch-copy p,
body.home-future .aionex-innovation-copy p,
body.home-future .section-intro p,
body.home-future .feature-card p,
body.home-future .ai-card p {
  font-size: clamp(.98rem, .22vw + .92rem, 1.12rem) !important;
  line-height: 1.72 !important;
}
body.home-future .agent-command-console,
body.home-future .agent-visual-panel,
body.home-future .aionex-launch-visual,
body.home-future .aionex-innovation-visual,
body.home-future .nova-visual-panel {
  width: 100% !important;
  max-width: 660px !important;
  min-height: clamp(420px, 32vw, 560px) !important;
  justify-self: end !important;
  overflow: hidden !important;
  border-radius: 30px !important;
}
body.home-future .launch-node,
body.home-future .aionex-node,
body.home-future .nova-chain-matrix span {
  max-width: 160px !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
  line-height: 1.2 !important;
}
body.home-future .launch-node-a { left: 8% !important; top: 13% !important; right: auto !important; }
body.home-future .launch-node-b { right: 8% !important; top: 13% !important; left: auto !important; }
body.home-future .launch-node-c { left: 8% !important; bottom: 13% !important; right: auto !important; }
body.home-future .launch-node-d { right: 8% !important; bottom: 13% !important; left: auto !important; }
body.home-future .aionex-node { position: absolute; }
body.home-future .aionex-node:nth-of-type(1) { left: 8% !important; top: 16% !important; }
body.home-future .aionex-node:nth-of-type(2) { right: 8% !important; top: 16% !important; }
body.home-future .aionex-node:nth-of-type(3) { left: 8% !important; bottom: 16% !important; }
body.home-future .aionex-node:nth-of-type(4) { right: 8% !important; bottom: 16% !important; }
body.home-future .feature-grid,
body.home-future .ai-grid,
body.home-future .tokenomics-grid,
body.home-future .roadmap-grid {
  gap: clamp(18px, 1.55vw, 28px) !important;
}
body.home-future .feature-card,
body.home-future .ai-card,
body.home-future .tokenomics-card,
body.home-future .metric-card,
body.home-future .terminal-card {
  padding: clamp(18px, 1.5vw, 26px) !important;
}

/* Functional pages: wide command layouts. */
.swap-command-grid,
.liquidity-dashboard-grid {
  width: var(--mf-pro-shell) !important;
  max-width: var(--mf-pro-shell) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.22fr) minmax(440px, .78fr) !important;
  gap: clamp(32px, 3.4vw, 62px) !important;
  align-items: start !important;
}
.swap-ai-monitor,
.ai-monitor-panel {
  width: 100% !important;
  min-height: 0 !important;
  padding: clamp(30px, 2.6vw, 46px) !important;
  border-radius: 34px !important;
}
.swap-ai-monitor h2,
.ai-monitor-panel h2,
.swap-ai-title,
.ai-monitor-title {
  font-size: clamp(2.4rem, 2.35vw, 3.85rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -.055em !important;
}
.swap-monitor-grid,
.ai-monitor-grid { gap: 16px !important; }
.swap-monitor-stat,
.ai-monitor-stat,
.swap-monitor-pair-card,
.ai-pair-card { padding: clamp(16px, 1.35vw, 24px) !important; }
.swap-command-grid > .swap-card,
.liquidity-dashboard-grid > .liquidity-card,
.swap-card,
.liquidity-card,
.wrap-card {
  width: 100% !important;
  max-width: 610px !important;
  justify-self: stretch !important;
  padding: clamp(30px, 2.45vw, 44px) !important;
  border-radius: 32px !important;
}
.swap-card h1,
.swap-card h2,
.liquidity-card h1,
.liquidity-card h2 { font-size: clamp(2.15rem, 1.2vw + 1.6rem, 3.05rem) !important; line-height: 1.08 !important; }
.input-wrapper { min-height: 64px !important; border-radius: 18px !important; }
.input-wrapper input { font-size: clamp(1.08rem, .36vw + .96rem, 1.3rem) !important; padding: 18px 20px !important; }
.token-select { min-width: 144px !important; max-width: 180px !important; padding-inline: 15px !important; gap: 8px !important; }
.token-select span[id$="TokenName"],
.token-select span[id$="Name"],
.token-select span,
.selected-token-symbol,
.token-symbol { font-size: .98rem !important; font-weight: 950 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

/* Team: avoid oversized role blocks, keep cards balanced. */
body.team-page .team-container { width: var(--mf-pro-shell-mid) !important; max-width: var(--mf-pro-shell-mid) !important; }
body.team-page .team-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(440px, .95fr) !important; gap: clamp(42px, 5vw, 82px) !important; }
body.team-page .team-hero h1 { font-size: clamp(3.8rem, 4.85vw, 6.5rem) !important; line-height: .94 !important; letter-spacing: -.074em !important; }
body.team-page .team-title { font-size: clamp(1rem, .24vw + .92rem, 1.16rem) !important; line-height: 1.45 !important; font-weight: 850 !important; color: var(--team-muted) !important; max-width: 720px !important; }
body.team-page .team-content h3 { font-size: clamp(1.9rem, 1.25vw + 1.35rem, 2.75rem) !important; line-height: 1.04 !important; letter-spacing: -.055em !important; }
body.team-page .team-member:not(.lead) .team-content h3 { font-size: clamp(1.65rem, .9vw + 1.25rem, 2.25rem) !important; }
body.team-page .team-bio { font-size: clamp(.94rem, .13vw + .9rem, 1.02rem) !important; line-height: 1.68 !important; }
body.team-page .team-card-inner { overflow: hidden !important; }
body.team-page .team-member.lead .team-card-inner { grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr) !important; }
body.team-page .team-photo-frame { min-height: clamp(340px, 26vw, 440px) !important; }
body.team-page .team-member:not(.lead) .team-photo-frame { min-height: clamp(300px, 22vw, 370px) !important; }
body.team-page .team-expertise-tags span { font-size: .75rem !important; line-height: 1.16 !important; }

/* Beta guide: stable readable tabs. */
body.beta-guide-page .guide-container { width: var(--mf-pro-shell-mid) !important; max-width: var(--mf-pro-shell-mid) !important; }
body.beta-guide-page .tab-panel,
body.beta-guide-page .guide-tab-panel,
body.beta-guide-page .mission-tab-panel { grid-template-columns: minmax(0, 1.32fr) minmax(320px, .68fr) !important; gap: clamp(24px, 3vw, 44px) !important; }
body.beta-guide-page .step-card,
body.beta-guide-page .mission-step,
body.beta-guide-page .guide-step { grid-template-columns: 54px minmax(0, 1fr) !important; column-gap: 18px !important; }
body.beta-guide-page .step-card > *:not(.step-number):not(.mission-step-number):not(.guide-step-number),
body.beta-guide-page .mission-step > *:not(.step-number):not(.mission-step-number):not(.guide-step-number),
body.beta-guide-page .guide-step > *:not(.step-number):not(.mission-step-number):not(.guide-step-number) { grid-column: 2 !important; min-width: 0 !important; }
body.beta-guide-page .step-number,
body.beta-guide-page .mission-step-number,
body.beta-guide-page .guide-step-number { grid-column: 1 !important; grid-row: 1 / span 4 !important; }
body.beta-guide-page .step-card p,
body.beta-guide-page .mission-step p,
body.beta-guide-page .guide-step p { white-space: normal !important; max-width: 100% !important; overflow-wrap: normal !important; line-height: 1.65 !important; }

/* Light mode content shell polish. */
body.light-mode .swap-card,
body.light-mode .liquidity-card,
body.light-mode .wrap-card,
body.light-mode .swap-ai-monitor,
body.light-mode .ai-monitor-panel,
body.light-mode .glass-card { box-shadow: 0 22px 50px rgba(15,23,42,.09) !important; }

@media (min-width: 1720px) {
  html { font-size: 17px; }
  .app-header { min-height: 82px !important; }
  #mainNav > a,
  #mainNav .nav-parent-title,
  .nav a,
  .nav-parent-title { font-size: 1.03rem !important; }
}

@media (max-width: 1360px) {
  :root { --mf-pro-shell: min(1180px, calc(100vw - 36px)); --mf-pro-shell-wide: min(1180px, calc(100vw - 36px)); --mf-pro-shell-mid: min(1120px, calc(100vw - 36px)); }
  .app-header { min-height: 68px !important; padding-inline: 16px !important; gap: 10px !important; }
  #mainNav, .nav { gap: 10px !important; }
  #mainNav > a, #mainNav .nav-parent-title, .nav a, .nav-parent-title { font-size: .84rem !important; }
  .logo-container img, #logo { height: 31px !important; max-width: 142px !important; }
  .chain-switcher { min-width: 210px !important; }
  .chain-switcher-trigger, .btn-connect, .btn-disconnect, .btn-theme { min-height: 39px !important; font-size: .78rem !important; }
  .maple-agent-strip-inner { grid-template-columns: auto minmax(0,1fr) !important; }
  .maple-agent-actions { grid-column: 2 !important; justify-content: flex-start !important; max-width: none !important; min-width: 0 !important; margin-top: 2px !important; }
  body.home-future .hero-shell,
  body.home-future .agent-story-shell,
  body.home-future .aionex-launch-shell,
  body.home-future .aionex-innovation-shell,
  body.home-future .chain-expansion-shell,
  .swap-command-grid,
  .liquidity-dashboard-grid,
  body.team-page .team-hero-grid { grid-template-columns: 1fr !important; }
  body.home-future .dashboard-panel,
  body.home-future .agent-command-console,
  body.home-future .agent-visual-panel,
  body.home-future .aionex-launch-visual,
  body.home-future .aionex-innovation-visual,
  body.home-future .nova-visual-panel,
  .swap-command-grid > .swap-card,
  .liquidity-dashboard-grid > .liquidity-card,
  .swap-card,
  .liquidity-card { max-width: 760px !important; justify-self: center !important; }
  .swap-command-grid,
  .liquidity-dashboard-grid { width: min(980px, calc(100vw - 36px)) !important; max-width: 980px !important; }
  body.team-page .team-member.lead .team-card-inner { grid-template-columns: 1fr !important; }
}

@media (max-width: 980px) {
  :root { --mf-pro-shell: min(100%, calc(100vw - 28px)); --mf-pro-shell-wide: min(100%, calc(100vw - 28px)); --mf-pro-shell-mid: min(100%, calc(100vw - 28px)); }
  .container, .team-container, .guide-container, .main-content > .container { width: var(--mf-pro-shell) !important; max-width: var(--mf-pro-shell) !important; }
  .app-header { min-height: 64px !important; padding: 10px 14px !important; }
  .logo-container img, #logo { height: 30px !important; max-width: 140px !important; }
  .maple-agent-strip { padding: 10px 0 !important; }
  .maple-agent-strip-inner {
    grid-template-columns: auto minmax(0, 1fr) !important;
    min-height: 0 !important;
    border-radius: 22px !important;
    padding: 14px !important;
    gap: 12px !important;
  }
  .maple-agent-avatar { width: 46px !important; height: 46px !important; border-radius: 17px !important; }
  .maple-agent-kicker { font-size: .64rem !important; }
  .maple-agent-copy strong { font-size: 1rem !important; line-height: 1.3 !important; }
  .maple-agent-copy p { font-size: .84rem !important; line-height: 1.5 !important; }
  .maple-agent-actions { grid-column: 1 / -1 !important; justify-content: flex-start !important; overflow-x: auto !important; flex-wrap: nowrap !important; min-width: 0 !important; max-width: 100% !important; padding-bottom: 2px !important; }
  .chain-ai-spotlight-inner { width: var(--mf-pro-shell) !important; max-width: var(--mf-pro-shell) !important; grid-template-columns: 1fr !important; }
  body.home-future .hero-title { font-size: clamp(2.9rem, 13vw, 4.8rem) !important; max-width: 12ch !important; }
  body.home-future .hero-shell,
  body.home-future .agent-story-shell,
  body.home-future .aionex-launch-shell,
  body.home-future .aionex-innovation-shell,
  body.home-future .chain-expansion-shell { grid-template-columns: 1fr !important; padding: 24px !important; border-radius: 26px !important; }
  body.home-future .agent-command-console,
  body.home-future .agent-visual-panel,
  body.home-future .aionex-launch-visual,
  body.home-future .aionex-innovation-visual,
  body.home-future .nova-visual-panel { min-height: 330px !important; max-width: 100% !important; }
  body.beta-guide-page .tab-panel,
  body.beta-guide-page .guide-tab-panel,
  body.beta-guide-page .mission-tab-panel { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  :root { --mf-pro-shell: min(100%, calc(100vw - 20px)); --mf-pro-shell-wide: min(100%, calc(100vw - 20px)); --mf-pro-shell-mid: min(100%, calc(100vw - 20px)); }
  .app-header { padding-inline: 10px !important; }
  .logo-container img, #logo { height: 27px !important; max-width: 122px !important; }
  .maple-agent-strip-inner { padding: 12px !important; border-radius: 20px !important; }
  .maple-agent-avatar { width: 40px !important; height: 40px !important; border-radius: 15px !important; }
  .maple-agent-copy strong { font-size: .94rem !important; }
  .maple-agent-copy p { font-size: .78rem !important; }
  .maple-agent-chip, .maple-agent-link { min-height: 34px !important; padding: 8px 10px !important; font-size: .68rem !important; }
  body.home-future .hero-premium { padding-top: 48px !important; padding-bottom: 54px !important; }
  body.home-future .hero-title { font-size: clamp(2.45rem, 15vw, 3.55rem) !important; }
  body.home-future .hero-subtitle { font-size: .96rem !important; line-height: 1.62 !important; }
  body.home-future .agent-story-title,
  body.home-future .aionex-launch-copy h2,
  body.home-future .aionex-innovation-copy h2,
  body.home-future .section-intro h2 { font-size: clamp(2rem, 10vw, 2.9rem) !important; }
  .swap-command-grid,
  .liquidity-dashboard-grid { width: var(--mf-pro-shell) !important; max-width: var(--mf-pro-shell) !important; }
  .swap-ai-monitor,
  .ai-monitor-panel,
  .swap-card,
  .liquidity-card,
  .wrap-card { padding: 20px !important; border-radius: 24px !important; }
  .token-select { min-width: 116px !important; max-width: 132px !important; padding-inline: 10px !important; }
  .token-select span[id$="TokenName"], .token-select span[id$="Name"], .token-select span { font-size: .88rem !important; }
  body.beta-guide-page .step-card,
  body.beta-guide-page .mission-step,
  body.beta-guide-page .guide-step { grid-template-columns: 42px minmax(0, 1fr) !important; column-gap: 12px !important; }
}

/* v7.1 critical: honor hidden spotlight and make NOVA strip premium but compact. */
[hidden],
.chain-ai-spotlight[hidden],
#chainSpotlight[hidden] { display: none !important; }

.maple-agent-strip { padding: 10px 0 !important; }
.maple-agent-strip-inner {
  min-height: 120px !important;
  padding: 18px 24px !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}
.maple-agent-copy strong { max-width: 840px !important; font-size: clamp(1.08rem, .48vw + .92rem, 1.42rem) !important; }
.maple-agent-copy p { max-width: 820px !important; font-size: clamp(.88rem, .18vw + .84rem, 1rem) !important; }
.maple-agent-actions { max-width: 440px !important; min-width: 390px !important; flex-wrap: nowrap !important; }
.maple-agent-chip, .maple-agent-link { min-height: 38px !important; padding: 9px 13px !important; }

@media (max-width: 1500px) {
  .maple-agent-strip-inner { grid-template-columns: auto minmax(0,1fr) !important; min-height: 0 !important; }
  .maple-agent-actions { grid-column: 2 !important; justify-content: flex-start !important; min-width: 0 !important; max-width: 100% !important; flex-wrap: wrap !important; }
}
@media (max-width: 980px) {
  .maple-agent-strip-inner { padding: 13px !important; }
  .maple-agent-actions { grid-column: 1 / -1 !important; flex-wrap: nowrap !important; overflow-x: auto !important; }
}

/* v7.2: agent strip is a compact page banner, not a home section block. */
body.home-future .maple-agent-strip,
.maple-agent-strip {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
@media (min-width: 1201px) {
  body.home-future .maple-agent-strip-inner,
  .maple-agent-strip-inner {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    min-height: 116px !important;
    height: auto !important;
    align-items: center !important;
  }
  body.home-future .maple-agent-actions,
  .maple-agent-actions {
    grid-column: auto !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    min-width: 380px !important;
    max-width: 430px !important;
    margin-top: 0 !important;
  }
}
@media (max-width: 1200px) {
  body.home-future .maple-agent-strip-inner,
  .maple-agent-strip-inner { min-height: 0 !important; }
}

/* v7.3 mobile overflow hardening. */
*, *::before, *::after { box-sizing: border-box; }
@media (max-width: 560px) {
  .swap-command-grid,
  .liquidity-dashboard-grid,
  .swap-command-grid > .swap-card,
  .liquidity-dashboard-grid > .liquidity-card,
  .swap-card,
  .liquidity-card,
  .wrap-card,
  .swap-ai-monitor,
  .ai-monitor-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }
  .ai-monitor-header,
  .ai-monitor-topline,
  .ai-monitor-grid,
  .ai-monitor-empty,
  .ai-monitor-foot,
  .swap-monitor-header,
  .swap-monitor-topline,
  .swap-monitor-grid,
  .swap-monitor-empty,
  .swap-monitor-foot,
  .token-input-group,
  .input-wrapper,
  .liquidity-card h2,
  .swap-card h2,
  .ai-monitor-title,
  .swap-ai-title {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .ai-monitor-title,
  .swap-ai-title { font-size: clamp(2rem, 10vw, 2.65rem) !important; }
  .ai-monitor-refresh,
  .swap-monitor-refresh { width: auto !important; max-width: 100% !important; }
  body.beta-guide-page .tab-buttons,
  body.beta-guide-page .guide-tabs,
  body.beta-guide-page .mission-tabs {
    display: flex !important;
    overflow-x: auto !important;
    max-width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }
  body.beta-guide-page .tab-btn { flex: 0 0 auto !important; }
}

/* v7.4 beta guide/mobile scroll containment. */
body.beta-guide-page .tabs-shell { max-width: 100% !important; overflow: hidden !important; }
body.beta-guide-page .tab-bar { max-width: 100% !important; width: 100% !important; overflow-x: auto !important; overflow-y: hidden !important; }
@media (max-width: 560px) {
  .maple-agent-actions { width: 100% !important; max-width: 100% !important; }
  .maple-agent-link, .maple-agent-chip { flex: 0 0 auto !important; }
}

/* v7.5 no horizontal document overflow on mobile guide/agent. */
@media (max-width: 560px) {
  body.beta-guide-page .tab-bar {
    flex-wrap: wrap !important;
    overflow: hidden !important;
    gap: 8px !important;
  }
  body.beta-guide-page .tab-btn {
    flex: 1 1 auto !important;
    min-width: max-content !important;
  }
  .maple-agent-actions {
    flex-wrap: wrap !important;
    overflow: hidden !important;
    gap: 8px !important;
  }
  .maple-agent-link, .maple-agent-chip {
    flex: 1 1 auto !important;
    max-width: 100% !important;
  }
}

/* v7.6 final horizontal safety */
html, body { max-width: 100% !important; overflow-x: hidden !important; }

/* =====================================================================
   v8 PREMIUM RESPONSIVE HEADER REDESIGN — MapleFi / NOVA-01
   Overrides older header patches with a single predictable system.
   ===================================================================== */
:root {
  --mf-header-h: 82px;
  --mf-header-bg: rgba(14, 16, 29, 0.88);
  --mf-header-border: rgba(255, 255, 255, 0.085);
  --mf-nav-glass: rgba(255,255,255,0.045);
  --mf-nav-hover: rgba(255, 142, 74, 0.13);
  --mf-nav-active: linear-gradient(135deg, rgba(255, 91, 77, 0.92), rgba(255, 155, 75, 0.92));
  --mf-cyan: #54d7ff;
  --mf-orange: #ff9e4d;
  --mf-red: #ff5a4d;
}

header.app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 2500 !important;
  min-height: var(--mf-header-h) !important;
  display: grid !important;
  grid-template-columns: 180px minmax(0, 1fr) auto !important;
  grid-template-areas: "brand nav actions" !important;
  align-items: center !important;
  gap: clamp(16px, 1.4vw, 28px) !important;
  padding: 14px clamp(22px, 2.4vw, 42px) !important;
  border-bottom: 1px solid var(--mf-header-border) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 94, 77, 0.13), transparent 32%),
    radial-gradient(circle at 72% -20%, rgba(84, 215, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(18, 20, 35, 0.94), var(--mf-header-bg)) !important;
  backdrop-filter: blur(24px) saturate(1.24) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.24) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255,255,255,0.055) !important;
  overflow: visible !important;
}

header.app-header::before {
  content: "";
  position: absolute;
  left: clamp(18px, 2vw, 40px);
  right: clamp(18px, 2vw, 40px);
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 158, 77, .45), rgba(84, 215, 255, .32), transparent);
  pointer-events: none;
}

body.light-mode header.app-header {
  --mf-header-bg: rgba(255, 255, 255, 0.86);
  --mf-header-border: rgba(18, 28, 48, 0.11);
  --mf-nav-glass: rgba(20, 30, 55, 0.045);
  --mf-nav-hover: rgba(255, 142, 74, 0.12);
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 112, 72, 0.12), transparent 32%),
    radial-gradient(circle at 72% -20%, rgba(31, 155, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.94), var(--mf-header-bg)) !important;
  box-shadow: 0 14px 34px rgba(27, 39, 70, 0.12), inset 0 1px 0 rgba(255,255,255,0.85) !important;
}

header.app-header .logo-container {
  grid-area: brand !important;
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  z-index: 3 !important;
}

header.app-header .logo-container img,
header.app-header .logo-container #logo {
  width: auto !important;
  height: 38px !important;
  max-width: 168px !important;
  min-width: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 10px 18px rgba(255, 94, 77, 0.14)) !important;
}

header.app-header nav#mainNav.nav,
header.app-header nav#mainNav.nav:not(.active) {
  grid-area: nav !important;
  position: relative !important;
  inset: auto !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 5px !important;
  padding: 7px !important;
  margin: 0 auto !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.018)),
    rgba(6, 10, 24, 0.44) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 16px 36px rgba(0,0,0,0.18) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  overflow: visible !important;
}

body.light-mode header.app-header nav#mainNav.nav,
body.light-mode header.app-header nav#mainNav.nav:not(.active) {
  border-color: rgba(20, 30, 55, 0.10) !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(245,247,255,0.72)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 14px 30px rgba(34, 54, 86, 0.10) !important;
}

header.app-header nav#mainNav.nav > a.top-nav-link,
header.app-header nav#mainNav.nav > a {
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: rgba(232, 235, 255, 0.76) !important;
  font-size: clamp(0.9rem, 0.22vw + 0.78rem, 1rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: transform .22s ease, color .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease !important;
}

body.light-mode header.app-header nav#mainNav.nav > a.top-nav-link,
body.light-mode header.app-header nav#mainNav.nav > a {
  color: rgba(25, 30, 48, 0.70) !important;
}

header.app-header nav#mainNav.nav > a.top-nav-link::before,
header.app-header nav#mainNav.nav > a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.14) 35%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .55s ease;
  z-index: -1;
}

header.app-header nav#mainNav.nav > a.top-nav-link::after,
header.app-header nav#mainNav.nav > a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 5px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mf-red), var(--mf-orange), var(--mf-cyan));
  transform: scaleX(0);
  opacity: 0;
  transform-origin: center;
  transition: transform .24s ease, opacity .24s ease;
}

header.app-header nav#mainNav.nav > a.top-nav-link:hover,
header.app-header nav#mainNav.nav > a:hover {
  color: #fff !important;
  transform: translateY(-1px) !important;
  border-color: rgba(255, 158, 77, 0.24) !important;
  background: var(--mf-nav-hover) !important;
  box-shadow: 0 10px 22px rgba(255, 124, 70, 0.11) !important;
}

body.light-mode header.app-header nav#mainNav.nav > a.top-nav-link:hover,
body.light-mode header.app-header nav#mainNav.nav > a:hover {
  color: #151827 !important;
}

header.app-header nav#mainNav.nav > a.top-nav-link:hover::before,
header.app-header nav#mainNav.nav > a:hover::before {
  transform: translateX(110%);
}

header.app-header nav#mainNav.nav > a.top-nav-link:hover::after,
header.app-header nav#mainNav.nav > a.active::after,
header.app-header nav#mainNav.nav > a:hover::after,
header.app-header nav#mainNav.nav > a.active::after {
  transform: scaleX(1);
  opacity: 1;
}

header.app-header nav#mainNav.nav > a.active,
header.app-header nav#mainNav.nav > a.top-nav-link.active {
  color: #fff !important;
  border-color: rgba(255, 158, 77, 0.34) !important;
  background: var(--mf-nav-active) !important;
  box-shadow: 0 12px 28px rgba(255, 93, 76, 0.22), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

header.app-header .nav-link-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 8px !important;
  color: var(--mf-orange) !important;
  background: rgba(255, 158, 77, 0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  flex: 0 0 20px !important;
}

header.app-header nav#mainNav.nav > a.active .nav-link-icon,
header.app-header nav#mainNav.nav > a:hover .nav-link-icon {
  color: #fff !important;
  background: rgba(255,255,255,0.18) !important;
}

header.app-header .nav-link-label { color: inherit !important; font: inherit !important; }

header.app-header nav#mainNav.nav > .nav-parent {
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

header.app-header .nav-parent-trigger {
  min-height: 46px !important;
  padding: 8px 12px 8px 14px !important;
  gap: 10px !important;
  border-radius: 18px !important;
  border-color: rgba(255, 158, 77, 0.26) !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(84, 215, 255, 0.23), transparent 34%),
    linear-gradient(135deg, rgba(255, 110, 70, 0.22), rgba(18, 33, 64, 0.58)) !important;
  box-shadow: 0 12px 28px rgba(255, 105, 72, 0.13), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

header.app-header .nav-parent-trigger:hover,
header.app-header .nav-parent.open .nav-parent-trigger {
  transform: translateY(-1px) scale(1.01) !important;
  border-color: rgba(84, 215, 255, 0.38) !important;
  box-shadow: 0 16px 34px rgba(84, 215, 255, 0.13), 0 12px 28px rgba(255, 105, 72, 0.15), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

header.app-header .nav-parent-kicker { font-size: .6rem !important; letter-spacing: .18em !important; color: #ffb789 !important; font-weight: 900 !important; }
header.app-header .nav-parent-title { font-size: .96rem !important; font-weight: 900 !important; color: #fff !important; letter-spacing: -.01em !important; }
header.app-header .nav-parent-visual { width: 38px !important; height: 38px !important; flex-basis: 38px !important; border-radius: 14px !important; }

header.app-header .nav-parent-menu {
  width: min(420px, calc(100vw - 32px)) !important;
  min-width: 380px !important;
  padding: 12px !important;
  border-radius: 22px !important;
  top: calc(100% + 14px) !important;
  z-index: 3200 !important;
}

header.app-header .nav-parent-item { padding: 15px 16px !important; border-radius: 17px !important; }
header.app-header .nav-parent-item-title { font-size: 1rem !important; font-weight: 900 !important; }
header.app-header .nav-parent-item-text { font-size: .86rem !important; line-height: 1.45 !important; }

header.app-header .header-actions {
  grid-area: actions !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  z-index: 3 !important;
}

header.app-header .chain-switcher {
  flex: 0 1 292px !important;
  width: 292px !important;
  min-width: 238px !important;
  max-width: 292px !important;
}

header.app-header .chain-switcher-trigger,
header.app-header .btn-connect,
header.app-header .btn-disconnect,
header.app-header .btn-theme,
header.app-header .mobile-menu-toggle {
  min-height: 46px !important;
  border-radius: 16px !important;
}

header.app-header .chain-switcher-trigger {
  padding: 8px 14px !important;
  border-color: rgba(82, 136, 255, 0.30) !important;
  background: linear-gradient(135deg, rgba(255, 124, 69, 0.17), rgba(32, 60, 126, 0.52)) !important;
}

header.app-header .chain-switcher-value { font-size: .94rem !important; font-weight: 900 !important; color: #fff !important; }
header.app-header .chain-switcher .nav-parent-kicker { font-size: .56rem !important; }

header.app-header .btn-connect,
header.app-header .btn-disconnect,
header.app-header .btn-theme {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.052) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  font-weight: 850 !important;
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease !important;
}

header.app-header .btn-connect {
  flex: 0 1 226px !important;
  min-width: 156px !important;
  max-width: 226px !important;
  padding: 9px 14px !important;
  font-size: .9rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

header.app-header .btn-theme {
  flex: 0 0 46px !important;
  width: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
  font-size: 1.05rem !important;
}

header.app-header .btn-disconnect {
  flex: 0 0 auto !important;
  padding: 9px 14px !important;
  font-size: .88rem !important;
}

header.app-header .btn-connect:hover,
header.app-header .btn-disconnect:hover,
header.app-header .btn-theme:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,158,77,0.34) !important;
  background: rgba(255,158,77,0.11) !important;
  color: #ffb777 !important;
  box-shadow: 0 12px 26px rgba(255, 110, 70, 0.13), inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

body.light-mode header.app-header .btn-connect,
body.light-mode header.app-header .btn-disconnect,
body.light-mode header.app-header .btn-theme {
  border-color: rgba(16, 28, 54, 0.10) !important;
  background: rgba(255,255,255,0.72) !important;
  color: #151827 !important;
}

/* elegant animated hamburger */
header.app-header .mobile-menu-toggle {
  display: none !important;
  flex: 0 0 46px !important;
  width: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
  position: relative !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  background: linear-gradient(135deg, rgba(255, 118, 71, 0.14), rgba(84, 215, 255, 0.08)) !important;
  color: var(--text) !important;
  cursor: pointer !important;
}

header.app-header .mobile-menu-toggle .menu-bars,
header.app-header .mobile-menu-toggle .menu-bars::before,
header.app-header .mobile-menu-toggle .menu-bars::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: transform .24s ease, opacity .2s ease, width .24s ease;
}
header.app-header .mobile-menu-toggle .menu-bars::before { transform: translate(-50%, -8px); }
header.app-header .mobile-menu-toggle .menu-bars::after { transform: translate(-50%, 6px); width: 13px; left: calc(50% + 2px); }
header.app-header .mobile-menu-toggle.is-open .menu-bars { transform: translate(-50%, -50%) rotate(45deg); }
header.app-header .mobile-menu-toggle.is-open .menu-bars::before { transform: translate(-50%, -50%) rotate(90deg); }
header.app-header .mobile-menu-toggle.is-open .menu-bars::after { opacity: 0; transform: translate(-50%, -50%) scaleX(.4); }

@media (max-width: 1700px) and (min-width: 1241px) {
  header.app-header { grid-template-columns: 164px minmax(0, 1fr) auto !important; gap: 14px !important; padding-inline: 22px !important; }
  header.app-header .logo-container { width: 164px !important; min-width: 164px !important; max-width: 164px !important; }
  header.app-header .logo-container img, header.app-header .logo-container #logo { height: 34px !important; max-width: 150px !important; }
  header.app-header nav#mainNav.nav { gap: 4px !important; padding: 6px !important; }
  header.app-header nav#mainNav.nav > a.top-nav-link, header.app-header nav#mainNav.nav > a { min-height: 39px !important; padding: 9px 9px !important; gap: 6px !important; font-size: .88rem !important; }
  header.app-header .nav-link-icon { width: 18px !important; height: 18px !important; flex-basis: 18px !important; font-size: .78rem !important; }
  header.app-header .nav-parent-trigger { min-height: 41px !important; padding: 7px 10px !important; }
  header.app-header .nav-parent-title { font-size: .86rem !important; }
  header.app-header .nav-parent-kicker { font-size: .52rem !important; }
  header.app-header .nav-parent-visual { width: 34px !important; height: 34px !important; flex-basis: 34px !important; }
  header.app-header .chain-switcher { width: 252px !important; min-width: 222px !important; max-width: 252px !important; }
  header.app-header .chain-switcher-trigger, header.app-header .btn-connect, header.app-header .btn-disconnect, header.app-header .btn-theme { min-height: 41px !important; }
  header.app-header .chain-switcher-value { font-size: .84rem !important; }
  header.app-header .btn-connect { min-width: 140px !important; max-width: 190px !important; font-size: .82rem !important; }
  header.app-header .btn-theme { width: 41px !important; min-width: 41px !important; flex-basis: 41px !important; }
  header.app-header .btn-disconnect { padding-inline: 11px !important; font-size: .8rem !important; }
}

/* Tablet / small laptop: polished drawer, no squeezed menus. */
@media (max-width: 1240px) {
  header.app-header {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "brand actions actions" !important;
    min-height: 76px !important;
    padding: 12px 16px !important;
    gap: 12px !important;
  }
  header.app-header .logo-container { width: 158px !important; min-width: 132px !important; max-width: 158px !important; }
  header.app-header .logo-container img, header.app-header .logo-container #logo { height: 33px !important; max-width: 150px !important; }
  header.app-header .header-actions { grid-area: actions !important; justify-self: end !important; gap: 8px !important; }
  header.app-header .mobile-menu-toggle { display: inline-flex !important; align-items: center !important; justify-content: center !important; }
  header.app-header nav#mainNav.nav,
  header.app-header nav#mainNav.nav:not(.active) {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 0 0 24px 24px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-top: 0 !important;
    background: linear-gradient(180deg, rgba(13, 17, 33, 0.98), rgba(8, 11, 24, 0.98)) !important;
    box-shadow: 0 28px 64px rgba(0,0,0,0.44), inset 0 1px 0 rgba(255,255,255,0.06) !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-10px) scale(.985) !important;
    pointer-events: none !important;
    max-height: calc(100vh - 84px) !important;
    overflow-y: auto !important;
    z-index: 3000 !important;
  }
  body.light-mode header.app-header nav#mainNav.nav,
  body.light-mode header.app-header nav#mainNav.nav:not(.active) {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(246,248,255,0.98)) !important;
    border-color: rgba(20, 30, 55, 0.10) !important;
    box-shadow: 0 24px 54px rgba(36,52,84,0.16) !important;
  }
  header.app-header nav#mainNav.nav.active,
  body.mobile-nav-open header.app-header nav#mainNav.nav.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }
  header.app-header nav#mainNav.nav > a.top-nav-link,
  header.app-header nav#mainNav.nav > a,
  header.app-header nav#mainNav.nav > .nav-parent {
    width: 100% !important;
    min-width: 0 !important;
  }
  header.app-header nav#mainNav.nav > a.top-nav-link,
  header.app-header nav#mainNav.nav > a {
    justify-content: flex-start !important;
    min-height: 50px !important;
    padding: 13px 14px !important;
    font-size: 1rem !important;
    background: rgba(255,255,255,0.035) !important;
  }
  header.app-header .nav-link-icon { width: 24px !important; height: 24px !important; flex-basis: 24px !important; }
  header.app-header .nav-parent-trigger { width: 100% !important; min-height: 54px !important; justify-content: space-between !important; padding: 10px 12px 10px 16px !important; }
  header.app-header .nav-parent-menu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 8px 0 0 !important;
    padding: 8px !important;
    border-radius: 18px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: none !important;
    max-height: none !important;
  }
  header.app-header .nav-parent.open .nav-parent-menu { display: block !important; }
  header.app-header .nav-parent:hover .nav-parent-menu { display: none !important; }
  header.app-header .nav-parent.open:hover .nav-parent-menu { display: block !important; }
  header.app-header .nav-parent-menu::before { display: none !important; }
  header.app-header .chain-switcher { width: 240px !important; min-width: 190px !important; max-width: 240px !important; }
  header.app-header .btn-connect { max-width: 178px !important; min-width: 124px !important; }
  header.app-header .btn-disconnect { display: none !important; }
}

@media (max-width: 760px) {
  header.app-header {
    grid-template-columns: minmax(112px, auto) minmax(0, 1fr) auto !important;
    grid-template-areas: "brand actions actions" !important;
    padding: 10px 12px !important;
    gap: 9px !important;
  }
  header.app-header .logo-container { width: 132px !important; min-width: 112px !important; max-width: 132px !important; }
  header.app-header .logo-container img, header.app-header .logo-container #logo { height: 28px !important; max-width: 124px !important; }
  header.app-header .header-actions { flex-wrap: wrap !important; gap: 7px !important; }
  header.app-header .chain-switcher { order: 1 !important; flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  header.app-header .btn-connect { order: 2 !important; flex: 1 1 128px !important; min-width: 0 !important; max-width: none !important; }
  header.app-header .btn-theme { order: 3 !important; }
  header.app-header .mobile-menu-toggle { order: 4 !important; }
  header.app-header .chain-switcher-trigger, header.app-header .btn-connect, header.app-header .btn-theme, header.app-header .mobile-menu-toggle { min-height: 42px !important; }
  header.app-header .btn-theme, header.app-header .mobile-menu-toggle { width: 42px !important; min-width: 42px !important; flex-basis: 42px !important; }
  header.app-header nav#mainNav.nav, header.app-header nav#mainNav.nav:not(.active) { left: 8px !important; right: 8px !important; max-height: calc(100vh - 122px) !important; }
}

@media (max-width: 430px) {
  header.app-header { grid-template-columns: 108px minmax(0, 1fr) !important; }
  header.app-header .logo-container { width: 108px !important; min-width: 108px !important; max-width: 108px !important; }
  header.app-header .logo-container img, header.app-header .logo-container #logo { height: 24px !important; max-width: 106px !important; }
  header.app-header .chain-switcher .nav-parent-kicker { display: none !important; }
  header.app-header .chain-switcher-value { font-size: .82rem !important; }
  header.app-header .btn-connect { font-size: .82rem !important; padding-inline: 10px !important; }
}

/* v8.1 active state for MapleVerse parent when a child route is active */
header.app-header .nav-parent.has-active .nav-parent-trigger {
  border-color: rgba(84, 215, 255, 0.42) !important;
  box-shadow: 0 14px 32px rgba(84, 215, 255, 0.13), 0 12px 28px rgba(255, 105, 72, 0.15), inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
header.app-header .nav-parent.has-active .nav-parent-title { color: #fff !important; }
header.app-header .nav-parent.has-active .nav-parent-visual { box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 1px rgba(84, 215, 255, 0.16), 0 12px 30px rgba(84, 215, 255, 0.16) !important; }

/* =====================================================================
   MAPLEFI HEADER FINAL POLISH — no-overlap desktop/tablet/mobile system
   ===================================================================== */
header.app-header {
  --header-bg-dark: rgba(18, 18, 29, 0.88);
  --header-bg-light: rgba(255, 255, 255, 0.88);
  --header-edge: rgba(255, 255, 255, 0.10);
  position: sticky !important;
  top: 0 !important;
  z-index: 5000 !important;
  width: 100% !important;
  min-height: 82px !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) auto !important;
  grid-template-areas: "brand nav actions" !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 14px clamp(20px, 2.6vw, 40px) !important;
  background:
    radial-gradient(circle at 8% 50%, rgba(255, 113, 76, 0.14), transparent 30%),
    linear-gradient(90deg, rgba(34, 19, 34, 0.92), rgba(15, 19, 32, 0.92)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.26), inset 0 -1px 0 rgba(255, 158, 77, 0.06) !important;
  backdrop-filter: blur(20px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.25) !important;
  overflow: visible !important;
}

body.light-mode header.app-header {
  background:
    radial-gradient(circle at 8% 50%, rgba(255, 113, 76, 0.13), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,0.94), rgba(246,250,255,0.90)) !important;
  border-bottom-color: rgba(28, 36, 60, 0.10) !important;
  box-shadow: 0 14px 36px rgba(31, 45, 75, 0.12), inset 0 -1px 0 rgba(255, 158, 77, 0.12) !important;
}

header.app-header .logo-container {
  grid-area: brand !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

header.app-header .logo-container img,
header.app-header #logo {
  width: auto !important;
  height: clamp(34px, 2.25vw, 44px) !important;
  max-width: 190px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 8px 18px rgba(255, 95, 70, 0.18)) !important;
}

header.app-header nav#mainNav.nav {
  grid-area: nav !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  gap: clamp(4px, 0.45vw, 10px) !important;
  padding: 5px !important;
  margin: 0 !important;
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.075) !important;
  border-radius: 28px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 32px rgba(0,0,0,0.16) !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

body.light-mode header.app-header nav#mainNav.nav {
  background: rgba(255,255,255,0.72) !important;
  border-color: rgba(26, 39, 70, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 10px 30px rgba(30,45,70,0.08) !important;
}

header.app-header nav#mainNav.nav > a.top-nav-link,
header.app-header nav#mainNav.nav > a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: auto !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 clamp(10px, 0.85vw, 16px) !important;
  margin: 0 !important;
  border-radius: 20px !important;
  color: rgba(234,234,255,0.82) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: clamp(0.92rem, 0.72vw, 1.02rem) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  overflow: hidden !important;
  transition: transform .22s ease, color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}

body.light-mode header.app-header nav#mainNav.nav > a.top-nav-link,
body.light-mode header.app-header nav#mainNav.nav > a {
  color: rgba(29, 35, 58, 0.78) !important;
}

header.app-header .nav-link-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  border-radius: 999px !important;
  font-size: 0.72rem !important;
  color: #ffad70 !important;
  background: rgba(255, 141, 82, 0.13) !important;
  box-shadow: inset 0 0 0 1px rgba(255,141,82,0.12) !important;
}

header.app-header nav#mainNav.nav > a::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.12) 45%, transparent 72%) !important;
  transform: translateX(-130%) skewX(-14deg) !important;
  transition: transform .55s ease !important;
  pointer-events: none !important;
}

header.app-header nav#mainNav.nav > a:hover,
header.app-header nav#mainNav.nav > a.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255, 80, 72, 0.92), rgba(255, 154, 75, 0.92)) !important;
  border-color: rgba(255,255,255,0.16) !important;
  box-shadow: 0 10px 28px rgba(255, 95, 71, 0.28), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  transform: translateY(-1px) !important;
}

header.app-header nav#mainNav.nav > a:hover::before,
header.app-header nav#mainNav.nav > a.active::before { transform: translateX(130%) skewX(-14deg) !important; }

header.app-header nav#mainNav.nav > a.active .nav-link-icon,
header.app-header nav#mainNav.nav > a:hover .nav-link-icon {
  color: #fff !important;
  background: rgba(255,255,255,0.18) !important;
}

header.app-header #mainNav > .nav-parent {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  position: relative !important;
}

header.app-header .nav-parent-trigger {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 190px !important;
  max-width: 210px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 10px 0 18px !important;
  margin: 0 !important;
  border-radius: 21px !important;
  border: 1px solid rgba(255, 158, 77, 0.22) !important;
  background: linear-gradient(135deg, rgba(255, 117, 62, 0.20), rgba(255,255,255,0.035), rgba(66, 199, 255, 0.08)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 28px rgba(0,0,0,0.16) !important;
  overflow: hidden !important;
}

header.app-header .nav-parent-kicker {
  flex: 0 0 auto !important;
  font-size: 0.66rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #ffb276 !important;
  white-space: nowrap !important;
}

header.app-header .nav-parent-title {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  font-size: clamp(0.96rem, 0.78vw, 1.08rem) !important;
  font-weight: 900 !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.light-mode header.app-header .nav-parent-title { color: #151827 !important; }

header.app-header .nav-parent-visual {
  flex: 0 0 36px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 14px !important;
  margin-left: 0 !important;
  transform: none !important;
}

header.app-header .nav-parent-menu {
  top: calc(100% + 14px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) !important;
  z-index: 7000 !important;
  border-radius: 22px !important;
  overflow: hidden !important;
}

header.app-header .nav-parent.open .nav-parent-menu,
header.app-header .nav-parent:hover .nav-parent-menu {
  transform: translateX(-50%) translateY(0) !important;
}

header.app-header .header-actions {
  grid-area: actions !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 9px !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

header.app-header .chain-switcher {
  flex: 0 1 250px !important;
  width: clamp(205px, 14vw, 270px) !important;
  min-width: 205px !important;
  max-width: 270px !important;
  position: relative !important;
}

header.app-header .chain-switcher-trigger {
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(75, 139, 255, 0.30) !important;
  background: linear-gradient(135deg, rgba(28,88,210,0.25), rgba(21,31,52,0.62)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 28px rgba(0,82,255,0.12) !important;
}

body.light-mode header.app-header .chain-switcher-trigger {
  background: linear-gradient(135deg, rgba(225,236,255,0.92), rgba(255,255,255,0.88)) !important;
  border-color: rgba(0,82,255,0.18) !important;
}

header.app-header .chain-switcher-trigger .nav-parent-kicker {
  flex: 0 0 auto !important;
  max-width: 82px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

header.app-header .chain-switcher-meta {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: block !important;
}

header.app-header .chain-switcher-value {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: clamp(0.90rem, 0.75vw, 1.02rem) !important;
  font-weight: 900 !important;
  color: #fff !important;
}
body.light-mode header.app-header .chain-switcher-value { color: #151827 !important; }

header.app-header .btn-connect,
header.app-header .btn-disconnect,
header.app-header .btn-theme,
header.app-header .mobile-menu-toggle {
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 17px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.045) !important;
  color: var(--text) !important;
  font-weight: 900 !important;
  font-size: 0.96rem !important;
  white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

header.app-header .btn-connect {
  flex: 0 1 230px !important;
  max-width: 240px !important;
  min-width: 150px !important;
  padding: 0 18px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

header.app-header .btn-disconnect {
  flex: 0 0 auto !important;
  padding: 0 18px !important;
}

header.app-header .btn-theme,
header.app-header .mobile-menu-toggle {
  width: 48px !important;
  min-width: 48px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

header.app-header .btn-connect:hover,
header.app-header .btn-disconnect:hover,
header.app-header .btn-theme:hover,
header.app-header .mobile-menu-toggle:hover {
  border-color: rgba(255, 158, 77, 0.34) !important;
  background: rgba(255, 158, 77, 0.10) !important;
  transform: translateY(-1px) !important;
}

header.app-header .mobile-menu-toggle { display: none !important; }

/* Compact laptop/tablet: keep brand + action controls visible, move menu into drawer before overlap. */
@media (max-width: 1640px) {
  header.app-header {
    grid-template-columns: minmax(126px, 190px) minmax(0, 1fr) !important;
    grid-template-areas: "brand actions" !important;
    gap: 12px !important;
    min-height: 76px !important;
  }

  header.app-header nav#mainNav.nav,
  header.app-header nav#mainNav.nav:not(.active) {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: clamp(12px, 2vw, 30px) !important;
    right: clamp(12px, 2vw, 30px) !important;
    width: auto !important;
    max-width: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 14px !important;
    border-radius: 0 0 24px 24px !important;
    max-height: calc(100vh - 84px) !important;
    overflow-y: auto !important;
    background: rgba(18, 18, 29, 0.97) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-top: 0 !important;
    box-shadow: 0 24px 55px rgba(0,0,0,0.35) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    pointer-events: none !important;
    z-index: 6500 !important;
  }

  body.light-mode header.app-header nav#mainNav.nav,
  body.light-mode header.app-header nav#mainNav.nav:not(.active) {
    background: rgba(255,255,255,0.97) !important;
    border-color: rgba(25,35,60,0.10) !important;
    box-shadow: 0 24px 55px rgba(30,45,70,0.14) !important;
  }

  header.app-header nav#mainNav.nav.active,
  body.mobile-nav-open header.app-header nav#mainNav.nav.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  header.app-header nav#mainNav.nav > a.top-nav-link,
  header.app-header nav#mainNav.nav > a {
    width: 100% !important;
    justify-content: flex-start !important;
    height: 48px !important;
    padding: 0 16px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.035) !important;
  }

  header.app-header #mainNav > .nav-parent { width: 100% !important; }
  header.app-header .nav-parent-trigger {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
    padding: 0 14px 0 16px !important;
  }
  header.app-header .nav-parent-menu {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    transform: none !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  header.app-header .nav-parent.open .nav-parent-menu { display: block !important; }
  header.app-header .nav-parent:hover .nav-parent-menu { display: none !important; }
  header.app-header .nav-parent.open:hover .nav-parent-menu { display: block !important; }
  header.app-header .nav-parent-menu::before { display: none !important; }

  header.app-header .mobile-menu-toggle { display: inline-flex !important; }
  header.app-header .header-actions { justify-self: end !important; }
}

@media (max-width: 1180px) {
  header.app-header .chain-switcher { width: 210px !important; min-width: 190px !important; max-width: 230px !important; }
  header.app-header .btn-connect { max-width: 190px !important; min-width: 135px !important; padding: 0 14px !important; }
  header.app-header .btn-disconnect { padding: 0 14px !important; }
}

@media (max-width: 860px) {
  header.app-header {
    grid-template-columns: 1fr !important;
    grid-template-areas: "brand" "actions" !important;
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  header.app-header .logo-container { justify-content: center !important; }
  header.app-header .header-actions {
    justify-self: stretch !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    gap: 8px !important;
  }
  header.app-header .chain-switcher,
  header.app-header .btn-connect { width: 100% !important; min-width: 0 !important; max-width: none !important; }
  header.app-header .btn-disconnect { display: none !important; }
  header.app-header nav#mainNav.nav,
  header.app-header nav#mainNav.nav:not(.active) { left: 10px !important; right: 10px !important; max-height: calc(100vh - 132px) !important; }
}

@media (max-width: 540px) {
  header.app-header { min-height: 0 !important; padding: 10px 10px !important; }
  header.app-header .logo-container img,
  header.app-header #logo { height: 32px !important; max-width: 146px !important; }
  header.app-header .header-actions {
    grid-template-columns: minmax(0, 1fr) 46px 46px !important;
  }
  header.app-header .btn-connect { grid-column: 1 / -1 !important; order: 5 !important; height: 44px !important; min-height: 44px !important; }
  header.app-header .chain-switcher-trigger,
  header.app-header .btn-theme,
  header.app-header .mobile-menu-toggle { height: 44px !important; min-height: 44px !important; }
  header.app-header .btn-theme,
  header.app-header .mobile-menu-toggle { width: 46px !important; min-width: 46px !important; }
  header.app-header .chain-switcher-trigger .nav-parent-kicker { display: none !important; }
  header.app-header .chain-switcher-value { font-size: 0.9rem !important; }
}

/* =====================================================================
   MAPLEFI HEADER REDESIGN — FINAL NO-COLLISION PASS
   Fixes: rounded base background, MapleVerse/Multichain overlap, wallet truncation,
   desktop/laptop/mobile positioning, light/dark compatibility.
   ===================================================================== */
:root {
  --mf-header-h: 82px;
  --mf-header-pad-x: clamp(18px, 2.2vw, 38px);
  --mf-header-bg: rgba(16, 16, 26, 0.90);
  --mf-header-line: rgba(255,255,255,0.095);
  --mf-header-chip: rgba(255,255,255,0.045);
  --mf-header-chip-hover: rgba(255,126,68,0.13);
  --mf-header-text: #f4f1ff;
  --mf-header-muted: rgba(244,241,255,0.66);
  --mf-header-accent: #ff8c4a;
  --mf-header-blue: #5ea3ff;
}
body.light-mode {
  --mf-header-bg: rgba(255,255,255,0.92);
  --mf-header-line: rgba(21, 33, 63, 0.10);
  --mf-header-chip: rgba(20, 33, 62, 0.045);
  --mf-header-chip-hover: rgba(255,126,68,0.11);
  --mf-header-text: #14192d;
  --mf-header-muted: rgba(20,25,45,0.64);
}

html, body { overflow-x: hidden; }

body header.app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 9000 !important;
  width: 100% !important;
  min-height: var(--mf-header-h) !important;
  padding: 12px var(--mf-header-pad-x) !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  grid-template-areas: "brand nav actions" !important;
  align-items: center !important;
  gap: clamp(12px, 1.15vw, 22px) !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 4% 0%, rgba(255,117,70,0.18), transparent 30%),
    radial-gradient(circle at 86% 6%, rgba(0,82,255,0.14), transparent 34%),
    linear-gradient(90deg, rgba(34,21,30,0.94), rgba(17,17,29,0.92) 46%, rgba(13,21,35,0.94)) !important;
  border-bottom: 1px solid var(--mf-header-line) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.045) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}
body.light-mode header.app-header {
  background:
    radial-gradient(circle at 4% 0%, rgba(255,117,70,0.11), transparent 30%),
    radial-gradient(circle at 86% 6%, rgba(0,82,255,0.08), transparent 34%),
    linear-gradient(90deg, rgba(255,255,255,0.96), rgba(248,250,255,0.92) 52%, rgba(245,248,255,0.95)) !important;
  box-shadow: 0 14px 42px rgba(27,42,82,0.10), inset 0 1px 0 rgba(255,255,255,0.80) !important;
}

header.app-header .logo-container {
  grid-area: brand !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  flex: none !important;
}
header.app-header .logo-container img,
header.app-header #logo {
  display: block !important;
  width: auto !important;
  height: clamp(34px, 2.25vw, 46px) !important;
  max-width: clamp(132px, 9vw, 190px) !important;
  object-fit: contain !important;
}

header.app-header nav#mainNav.nav {
  grid-area: nav !important;
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(5px, .42vw, 9px) !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
  flex-wrap: nowrap !important;
}

header.app-header nav#mainNav.nav > a.top-nav-link,
header.app-header nav#mainNav.nav > a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 clamp(10px, .72vw, 15px) !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--mf-header-muted) !important;
  font-size: clamp(.88rem, .76vw, 1.02rem) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  max-width: max-content !important;
  transition: transform .22s ease, color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
header.app-header .nav-link-icon {
  display: inline-flex !important;
  width: 19px !important;
  height: 19px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  color: #ffad70 !important;
  background: rgba(255,140,74,0.12) !important;
  border: 1px solid rgba(255,150,80,0.12) !important;
  font-size: 10px !important;
  flex: 0 0 19px !important;
}
header.app-header .nav-link-label {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  min-width: 0 !important;
}
header.app-header nav#mainNav.nav > a.top-nav-link:hover,
header.app-header nav#mainNav.nav > a:hover {
  color: var(--mf-header-text) !important;
  background: var(--mf-header-chip-hover) !important;
  border-color: rgba(255,143,74,0.22) !important;
  box-shadow: 0 10px 26px rgba(255,112,65,0.12), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transform: translateY(-1px) !important;
}
header.app-header nav#mainNav.nav > a.top-nav-link.active,
header.app-header nav#mainNav.nav > a.active {
  color: #fff !important;
  background: linear-gradient(135deg, #ff4f48, #ff9148) !important;
  border-color: rgba(255,170,115,0.38) !important;
  box-shadow: 0 13px 28px rgba(255,102,62,0.30), inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
body.light-mode header.app-header nav#mainNav.nav > a.top-nav-link.active,
body.light-mode header.app-header nav#mainNav.nav > a.active { color: #fff !important; }
header.app-header nav#mainNav.nav > a::before,
header.app-header nav#mainNav.nav > a::after { display: none !important; }

header.app-header #mainNav > .nav-parent,
header.app-header #ecosystemMenu {
  flex: 0 0 auto !important;
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  overflow: visible !important;
}
header.app-header .nav-parent-trigger {
  position: relative !important;
  display: inline-grid !important;
  grid-template-columns: auto minmax(0, auto) 34px !important;
  align-items: center !important;
  gap: 9px !important;
  height: 46px !important;
  min-height: 46px !important;
  max-width: clamp(182px, 11vw, 228px) !important;
  width: clamp(178px, 10.7vw, 224px) !important;
  padding: 0 8px 0 15px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  color: var(--mf-header-text) !important;
  border: 1px solid rgba(255,139,75,0.25) !important;
  background:
    linear-gradient(135deg, rgba(255,126,65,0.18), rgba(255,126,65,0.06) 38%, rgba(68,167,255,0.10)),
    rgba(255,255,255,0.035) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 30px rgba(255,110,60,0.10) !important;
  transform: none !important;
  white-space: nowrap !important;
}
header.app-header .nav-parent-trigger:hover,
header.app-header .nav-parent.open .nav-parent-trigger {
  border-color: rgba(255,171,97,0.46) !important;
  background:
    linear-gradient(135deg, rgba(255,126,65,0.24), rgba(255,126,65,0.09) 38%, rgba(68,167,255,0.16)),
    rgba(255,255,255,0.055) !important;
  transform: translateY(-1px) !important;
}
header.app-header .nav-parent-kicker {
  display: inline-block !important;
  min-width: 0 !important;
  max-width: 72px !important;
  color: #ffb586 !important;
  font-size: .58rem !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .19em !important;
  text-transform: uppercase !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  opacity: 1 !important;
}
header.app-header .nav-parent-title {
  display: block !important;
  min-width: 0 !important;
  max-width: 96px !important;
  color: var(--mf-header-text) !important;
  font-size: clamp(.92rem, .78vw, 1.02rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.015em !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
header.app-header .nav-parent-visual {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 15px !important;
}
header.app-header .nav-parent-menu {
  top: calc(100% + 12px) !important;
  right: 0 !important;
  left: auto !important;
  transform: translateY(8px) !important;
  width: min(360px, calc(100vw - 34px)) !important;
  min-width: min(330px, calc(100vw - 34px)) !important;
  max-width: calc(100vw - 34px) !important;
  z-index: 9900 !important;
}
header.app-header .nav-parent.open .nav-parent-menu,
header.app-header .nav-parent:hover .nav-parent-menu {
  transform: translateY(0) !important;
}
header.app-header .nav-parent-menu::before {
  left: auto !important;
  right: 24px !important;
  transform: rotate(45deg) !important;
}

header.app-header .header-actions {
  grid-area: actions !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(7px, .55vw, 11px) !important;
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  justify-self: end !important;
}

header.app-header .chain-switcher {
  position: relative !important;
  flex: 0 1 auto !important;
  width: clamp(200px, 12.3vw, 245px) !important;
  min-width: 190px !important;
  max-width: 245px !important;
  overflow: visible !important;
}
header.app-header .chain-switcher-trigger {
  width: 100% !important;
  height: 46px !important;
  min-height: 46px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  border: 1px solid rgba(73,137,255,0.38) !important;
  color: var(--mf-header-text) !important;
  background:
    radial-gradient(circle at 7% 30%, rgba(255,146,87,0.20), transparent 34%),
    linear-gradient(135deg, rgba(28,82,190,0.26), rgba(17,28,51,0.74)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.075), 0 10px 28px rgba(0,82,255,0.12) !important;
  transform: none !important;
}
header.app-header .chain-switcher-glow { display: none !important; }
header.app-header .chain-switcher-trigger > .nav-parent-kicker {
  grid-column: 1 !important;
  max-width: 82px !important;
  font-size: .55rem !important;
  letter-spacing: .16em !important;
  color: #ffb184 !important;
  font-weight: 950 !important;
}
header.app-header .chain-switcher-meta {
  grid-column: 2 !important;
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
header.app-header .chain-switcher-value {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  color: #ffffff !important;
  font-size: clamp(.86rem, .76vw, 1rem) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
header.app-header .chain-switcher-caret {
  grid-column: 3 !important;
  width: 8px !important;
  min-width: 8px !important;
  opacity: .85 !important;
}
header.app-header .chain-switcher-menu {
  right: 0 !important;
  left: auto !important;
  width: min(320px, calc(100vw - 32px)) !important;
  min-width: min(300px, calc(100vw - 32px)) !important;
  z-index: 9950 !important;
}
body.light-mode header.app-header .chain-switcher-trigger {
  background: linear-gradient(135deg, rgba(228,238,255,0.95), rgba(255,255,255,0.90)) !important;
  border-color: rgba(0,82,255,0.20) !important;
}
body.light-mode header.app-header .chain-switcher-value { color: #142044 !important; }

header.app-header .btn-connect,
header.app-header .btn-disconnect,
header.app-header .btn-theme,
header.app-header .mobile-menu-toggle {
  position: relative !important;
  height: 46px !important;
  min-height: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.105) !important;
  background: rgba(255,255,255,0.048) !important;
  color: var(--mf-header-text) !important;
  font-size: clamp(.86rem, .74vw, .98rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.005em !important;
  white-space: nowrap !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
body.light-mode header.app-header .btn-connect,
body.light-mode header.app-header .btn-disconnect,
body.light-mode header.app-header .btn-theme,
body.light-mode header.app-header .mobile-menu-toggle {
  background: rgba(255,255,255,0.80) !important;
  color: #14192d !important;
  border-color: rgba(21,33,63,0.10) !important;
}
header.app-header .btn-connect {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: clamp(170px, 12.5vw, 240px) !important;
  min-width: 148px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
header.app-header .btn-disconnect {
  flex: 0 0 auto !important;
  min-width: 118px !important;
  padding: 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
header.app-header .btn-theme,
header.app-header .mobile-menu-toggle {
  flex: 0 0 46px !important;
  width: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
header.app-header .btn-connect:hover,
header.app-header .btn-disconnect:hover,
header.app-header .btn-theme:hover,
header.app-header .mobile-menu-toggle:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,151,83,0.34) !important;
  background: rgba(255,151,83,0.11) !important;
  box-shadow: 0 10px 24px rgba(255,122,64,0.12), inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
header.app-header .mobile-menu-toggle { display: none !important; }
header.app-header .menu-bars,
header.app-header .menu-bars::before,
header.app-header .menu-bars::after {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 99px !important;
  background: currentColor !important;
  position: relative !important;
  content: "" !important;
}
header.app-header .menu-bars::before { position: absolute !important; top: -6px !important; left: 0 !important; }
header.app-header .menu-bars::after { position: absolute !important; top: 6px !important; left: 0 !important; }

/* Connected state: wallet badge should be visible, not clipped. */
header.app-header .btn-connect[data-connected="true"],
header.app-header .btn-connect.is-connected,
header.app-header .btn-connect.connected {
  min-width: 188px !important;
  max-width: 245px !important;
}

/* Prevent the old breakpoint from pushing the header into an awkward half-drawer on large laptops. */
@media (min-width: 1501px) {
  header.app-header .mobile-menu-toggle { display: none !important; }
}

/* Laptop/tablet: collapse navigation into a drawer before any overlap can happen. */
@media (max-width: 1500px) {
  body header.app-header {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "brand actions" !important;
    min-height: 78px !important;
  }
  header.app-header nav#mainNav.nav,
  header.app-header nav#mainNav.nav:not(.active) {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: clamp(12px, 2vw, 28px) !important;
    right: clamp(12px, 2vw, 28px) !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 14px !important;
    max-height: calc(100vh - 86px) !important;
    overflow-y: auto !important;
    background: rgba(17,17,29,0.98) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-top: 0 !important;
    border-radius: 0 0 24px 24px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.36) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 9900 !important;
  }
  body.light-mode header.app-header nav#mainNav.nav,
  body.light-mode header.app-header nav#mainNav.nav:not(.active) {
    background: rgba(255,255,255,0.98) !important;
    border-color: rgba(20,30,60,0.10) !important;
    box-shadow: 0 24px 60px rgba(30,45,70,0.15) !important;
  }
  header.app-header nav#mainNav.nav.active,
  body.mobile-nav-open header.app-header nav#mainNav.nav.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  header.app-header nav#mainNav.nav > a.top-nav-link,
  header.app-header nav#mainNav.nav > a {
    width: 100% !important;
    max-width: none !important;
    height: 48px !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,0.035) !important;
  }
  header.app-header #mainNav > .nav-parent,
  header.app-header #ecosystemMenu { width: 100% !important; display: block !important; }
  header.app-header .nav-parent-trigger {
    width: 100% !important;
    max-width: none !important;
    grid-template-columns: auto minmax(0, 1fr) 34px !important;
    justify-content: stretch !important;
  }
  header.app-header .nav-parent-title { max-width: none !important; }
  header.app-header .nav-parent-menu {
    position: static !important;
    display: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  header.app-header .nav-parent.open .nav-parent-menu { display: block !important; }
  header.app-header .nav-parent:hover .nav-parent-menu { display: none !important; }
  header.app-header .nav-parent.open:hover .nav-parent-menu { display: block !important; }
  header.app-header .nav-parent-menu::before { display: none !important; }
  header.app-header .mobile-menu-toggle { display: inline-flex !important; }
  header.app-header .header-actions { justify-self: end !important; }
}

@media (max-width: 1080px) {
  header.app-header .chain-switcher { width: clamp(180px, 22vw, 220px) !important; min-width: 170px !important; }
  header.app-header .btn-connect { min-width: 128px !important; max-width: 190px !important; padding-inline: 14px !important; }
  header.app-header .btn-disconnect { min-width: 104px !important; padding-inline: 14px !important; }
}

@media (max-width: 860px) {
  body header.app-header {
    grid-template-columns: 1fr !important;
    grid-template-areas: "brand" "actions" !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }
  header.app-header .logo-container { justify-content: center !important; }
  header.app-header .logo-container img,
  header.app-header #logo { height: 34px !important; max-width: 154px !important; }
  header.app-header .header-actions {
    width: 100% !important;
    justify-self: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto auto !important;
    gap: 8px !important;
  }
  header.app-header .chain-switcher,
  header.app-header .btn-connect {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
  header.app-header .btn-disconnect { display: none !important; }
  header.app-header nav#mainNav.nav,
  header.app-header nav#mainNav.nav:not(.active) {
    left: 10px !important;
    right: 10px !important;
    max-height: calc(100vh - 132px) !important;
  }
}

@media (max-width: 560px) {
  body header.app-header { padding: 10px 10px !important; }
  header.app-header .logo-container img,
  header.app-header #logo { height: 31px !important; max-width: 140px !important; }
  header.app-header .header-actions {
    grid-template-columns: minmax(0, 1fr) 44px 44px !important;
  }
  header.app-header .chain-switcher { grid-column: 1 / 2 !important; }
  header.app-header .btn-theme { grid-column: 2 / 3 !important; }
  header.app-header .mobile-menu-toggle { grid-column: 3 / 4 !important; }
  header.app-header .btn-connect { grid-column: 1 / -1 !important; height: 44px !important; min-height: 44px !important; }
  header.app-header .chain-switcher-trigger,
  header.app-header .btn-theme,
  header.app-header .mobile-menu-toggle { height: 44px !important; min-height: 44px !important; }
  header.app-header .btn-theme,
  header.app-header .mobile-menu-toggle { width: 44px !important; min-width: 44px !important; }
  header.app-header .chain-switcher-trigger > .nav-parent-kicker { display: none !important; }
  header.app-header .chain-switcher-value { font-size: .88rem !important; }
}


/* =====================================================================
   MAPLEFI HEADER REDESIGN — FINAL NO-COLLISION PASS
   Fixes: rounded base background, MapleVerse/Multichain overlap, wallet truncation,
   desktop/laptop/mobile positioning, light/dark compatibility.
   ===================================================================== */
:root {
  --mf-header-h: 82px;
  --mf-header-pad-x: clamp(18px, 2.2vw, 38px);
  --mf-header-bg: rgba(16, 16, 26, 0.90);
  --mf-header-line: rgba(255,255,255,0.095);
  --mf-header-chip: rgba(255,255,255,0.045);
  --mf-header-chip-hover: rgba(255,126,68,0.13);
  --mf-header-text: #f4f1ff;
  --mf-header-muted: rgba(244,241,255,0.66);
  --mf-header-accent: #ff8c4a;
  --mf-header-blue: #5ea3ff;
}
body.light-mode {
  --mf-header-bg: rgba(255,255,255,0.92);
  --mf-header-line: rgba(21, 33, 63, 0.10);
  --mf-header-chip: rgba(20, 33, 62, 0.045);
  --mf-header-chip-hover: rgba(255,126,68,0.11);
  --mf-header-text: #14192d;
  --mf-header-muted: rgba(20,25,45,0.64);
}
html, body { overflow-x: hidden; }
body header.app-header {
  position: sticky !important; top: 0 !important; z-index: 9000 !important; width: 100% !important;
  min-height: var(--mf-header-h) !important; padding: 12px var(--mf-header-pad-x) !important;
  display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; grid-template-areas: "brand nav actions" !important;
  align-items: center !important; gap: clamp(12px, 1.15vw, 22px) !important; overflow: visible !important;
  background: radial-gradient(circle at 4% 0%, rgba(255,117,70,0.18), transparent 30%), radial-gradient(circle at 86% 6%, rgba(0,82,255,0.14), transparent 34%), linear-gradient(90deg, rgba(34,21,30,0.94), rgba(17,17,29,0.92) 46%, rgba(13,21,35,0.94)) !important;
  border-bottom: 1px solid var(--mf-header-line) !important; box-shadow: 0 16px 46px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.045) !important;
  backdrop-filter: blur(22px) saturate(145%) !important; -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}
body.light-mode header.app-header { background: radial-gradient(circle at 4% 0%, rgba(255,117,70,0.11), transparent 30%), radial-gradient(circle at 86% 6%, rgba(0,82,255,0.08), transparent 34%), linear-gradient(90deg, rgba(255,255,255,0.96), rgba(248,250,255,0.92) 52%, rgba(245,248,255,0.95)) !important; box-shadow: 0 14px 42px rgba(27,42,82,0.10), inset 0 1px 0 rgba(255,255,255,0.80) !important; }
header.app-header .logo-container { grid-area: brand !important; display: flex !important; align-items: center !important; min-width: 0 !important; flex: none !important; }
header.app-header .logo-container img, header.app-header #logo { display: block !important; width: auto !important; height: clamp(34px, 2.25vw, 46px) !important; max-width: clamp(132px, 9vw, 190px) !important; object-fit: contain !important; }
header.app-header nav#mainNav.nav {
  grid-area: nav !important; position: relative !important; inset: auto !important; display: flex !important; align-items: center !important; justify-content: center !important;
  gap: clamp(5px, .42vw, 9px) !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; flex-wrap: nowrap !important;
}
header.app-header nav#mainNav.nav > a.top-nav-link, header.app-header nav#mainNav.nav > a {
  position: relative !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
  height: 44px !important; min-height: 44px !important; padding: 0 clamp(10px, .72vw, 15px) !important; border-radius: 999px !important; border: 1px solid transparent !important;
  background: transparent !important; color: var(--mf-header-muted) !important; font-size: clamp(.88rem, .76vw, 1.02rem) !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: -0.01em !important;
  text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; max-width: max-content !important; transition: transform .22s ease, color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease !important;
}
header.app-header .nav-link-icon { display: inline-flex !important; width: 19px !important; height: 19px !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; color: #ffad70 !important; background: rgba(255,140,74,0.12) !important; border: 1px solid rgba(255,150,80,0.12) !important; font-size: 10px !important; flex: 0 0 19px !important; }
header.app-header .nav-link-label { color: inherit !important; font-size: inherit !important; font-weight: inherit !important; min-width: 0 !important; }
header.app-header nav#mainNav.nav > a.top-nav-link:hover, header.app-header nav#mainNav.nav > a:hover { color: var(--mf-header-text) !important; background: var(--mf-header-chip-hover) !important; border-color: rgba(255,143,74,0.22) !important; box-shadow: 0 10px 26px rgba(255,112,65,0.12), inset 0 1px 0 rgba(255,255,255,0.06) !important; transform: translateY(-1px) !important; }
header.app-header nav#mainNav.nav > a.top-nav-link.active, header.app-header nav#mainNav.nav > a.active { color: #fff !important; background: linear-gradient(135deg, #ff4f48, #ff9148) !important; border-color: rgba(255,170,115,0.38) !important; box-shadow: 0 13px 28px rgba(255,102,62,0.30), inset 0 1px 0 rgba(255,255,255,0.20) !important; }
body.light-mode header.app-header nav#mainNav.nav > a.top-nav-link.active, body.light-mode header.app-header nav#mainNav.nav > a.active { color: #fff !important; }
header.app-header nav#mainNav.nav > a::before, header.app-header nav#mainNav.nav > a::after { display: none !important; }
header.app-header #mainNav > .nav-parent, header.app-header #ecosystemMenu { flex: 0 0 auto !important; position: relative !important; width: auto !important; min-width: 0 !important; display: inline-flex !important; align-items: center !important; overflow: visible !important; }
header.app-header .nav-parent-trigger {
  position: relative !important; display: inline-grid !important; grid-template-columns: auto minmax(0, auto) 34px !important; align-items: center !important; gap: 9px !important;
  height: 46px !important; min-height: 46px !important; max-width: clamp(182px, 11vw, 228px) !important; width: clamp(178px, 10.7vw, 224px) !important; padding: 0 8px 0 15px !important;
  border-radius: 999px !important; overflow: hidden !important; color: var(--mf-header-text) !important; border: 1px solid rgba(255,139,75,0.25) !important;
  background: linear-gradient(135deg, rgba(255,126,65,0.18), rgba(255,126,65,0.06) 38%, rgba(68,167,255,0.10)), rgba(255,255,255,0.035) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 30px rgba(255,110,60,0.10) !important; transform: none !important; white-space: nowrap !important;
}
header.app-header .nav-parent-trigger:hover, header.app-header .nav-parent.open .nav-parent-trigger { border-color: rgba(255,171,97,0.46) !important; background: linear-gradient(135deg, rgba(255,126,65,0.24), rgba(255,126,65,0.09) 38%, rgba(68,167,255,0.16)), rgba(255,255,255,0.055) !important; transform: translateY(-1px) !important; }
header.app-header .nav-parent-kicker { display: inline-block !important; min-width: 0 !important; max-width: 72px !important; color: #ffb586 !important; font-size: .58rem !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .19em !important; text-transform: uppercase !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; opacity: 1 !important; }
header.app-header .nav-parent-title { display: block !important; min-width: 0 !important; max-width: 96px !important; color: var(--mf-header-text) !important; font-size: clamp(.92rem, .78vw, 1.02rem) !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: -0.015em !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
header.app-header .nav-parent-visual { width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 15px !important; }
header.app-header .nav-parent-menu { top: calc(100% + 12px) !important; right: 0 !important; left: auto !important; transform: translateY(8px) !important; width: min(360px, calc(100vw - 34px)) !important; min-width: min(330px, calc(100vw - 34px)) !important; max-width: calc(100vw - 34px) !important; z-index: 9900 !important; }
header.app-header .nav-parent.open .nav-parent-menu, header.app-header .nav-parent:hover .nav-parent-menu { transform: translateY(0) !important; }
header.app-header .nav-parent-menu::before { left: auto !important; right: 24px !important; transform: rotate(45deg) !important; }
header.app-header .header-actions { grid-area: actions !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: clamp(7px, .55vw, 11px) !important; min-width: 0 !important; max-width: 100% !important; width: auto !important; flex-wrap: nowrap !important; overflow: visible !important; justify-self: end !important; }
header.app-header .chain-switcher { position: relative !important; flex: 0 1 auto !important; width: clamp(200px, 12.3vw, 245px) !important; min-width: 190px !important; max-width: 245px !important; overflow: visible !important; }
header.app-header .chain-switcher-trigger { width: 100% !important; height: 46px !important; min-height: 46px !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; padding: 0 12px !important; border-radius: 999px !important; overflow: hidden !important; border: 1px solid rgba(73,137,255,0.38) !important; color: var(--mf-header-text) !important; background: radial-gradient(circle at 7% 30%, rgba(255,146,87,0.20), transparent 34%), linear-gradient(135deg, rgba(28,82,190,0.26), rgba(17,28,51,0.74)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.075), 0 10px 28px rgba(0,82,255,0.12) !important; transform: none !important; }
header.app-header .chain-switcher-glow { display: none !important; }
header.app-header .chain-switcher-trigger > .nav-parent-kicker { grid-column: 1 !important; max-width: 82px !important; font-size: .55rem !important; letter-spacing: .16em !important; color: #ffb184 !important; font-weight: 950 !important; }
header.app-header .chain-switcher-meta { grid-column: 2 !important; display: block !important; min-width: 0 !important; max-width: 100% !important; }
header.app-header .chain-switcher-value { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; color: #ffffff !important; font-size: clamp(.86rem, .76vw, 1rem) !important; font-weight: 950 !important; line-height: 1 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
header.app-header .chain-switcher-caret { grid-column: 3 !important; width: 8px !important; min-width: 8px !important; opacity: .85 !important; }
header.app-header .chain-switcher-menu { right: 0 !important; left: auto !important; width: min(320px, calc(100vw - 32px)) !important; min-width: min(300px, calc(100vw - 32px)) !important; z-index: 9950 !important; }
body.light-mode header.app-header .chain-switcher-trigger { background: linear-gradient(135deg, rgba(228,238,255,0.95), rgba(255,255,255,0.90)) !important; border-color: rgba(0,82,255,0.20) !important; }
body.light-mode header.app-header .chain-switcher-value { color: #142044 !important; }
header.app-header .btn-connect, header.app-header .btn-disconnect, header.app-header .btn-theme, header.app-header .mobile-menu-toggle { position: relative !important; height: 46px !important; min-height: 46px !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,0.105) !important; background: rgba(255,255,255,0.048) !important; color: var(--mf-header-text) !important; font-size: clamp(.86rem, .74vw, .98rem) !important; font-weight: 900 !important; letter-spacing: -0.005em !important; white-space: nowrap !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important; transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease !important; }
body.light-mode header.app-header .btn-connect, body.light-mode header.app-header .btn-disconnect, body.light-mode header.app-header .btn-theme, body.light-mode header.app-header .mobile-menu-toggle { background: rgba(255,255,255,0.80) !important; color: #14192d !important; border-color: rgba(21,33,63,0.10) !important; }
header.app-header .btn-connect { flex: 0 1 auto !important; width: auto !important; max-width: clamp(170px, 12.5vw, 240px) !important; min-width: 148px !important; padding: 0 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; text-overflow: ellipsis !important; }
header.app-header .btn-disconnect { flex: 0 0 auto !important; min-width: 118px !important; padding: 0 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
header.app-header .btn-theme, header.app-header .mobile-menu-toggle { flex: 0 0 46px !important; width: 46px !important; min-width: 46px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
header.app-header .btn-connect:hover, header.app-header .btn-disconnect:hover, header.app-header .btn-theme:hover, header.app-header .mobile-menu-toggle:hover { transform: translateY(-1px) !important; border-color: rgba(255,151,83,0.34) !important; background: rgba(255,151,83,0.11) !important; box-shadow: 0 10px 24px rgba(255,122,64,0.12), inset 0 1px 0 rgba(255,255,255,0.08) !important; }
header.app-header .mobile-menu-toggle { display: none !important; }
header.app-header .menu-bars, header.app-header .menu-bars::before, header.app-header .menu-bars::after { display: block !important; width: 18px !important; height: 2px !important; border-radius: 99px !important; background: currentColor !important; position: relative !important; content: "" !important; }
header.app-header .menu-bars::before { position: absolute !important; top: -6px !important; left: 0 !important; }
header.app-header .menu-bars::after { position: absolute !important; top: 6px !important; left: 0 !important; }
header.app-header .btn-connect[data-connected="true"], header.app-header .btn-connect.is-connected, header.app-header .btn-connect.connected { min-width: 188px !important; max-width: 245px !important; }
@media (min-width: 1501px) { header.app-header .mobile-menu-toggle { display: none !important; } }
@media (max-width: 1500px) {
  body header.app-header { grid-template-columns: auto minmax(0, 1fr) !important; grid-template-areas: "brand actions" !important; min-height: 78px !important; }
  header.app-header nav#mainNav.nav, header.app-header nav#mainNav.nav:not(.active) { position: absolute !important; top: calc(100% + 1px) !important; left: clamp(12px, 2vw, 28px) !important; right: clamp(12px, 2vw, 28px) !important; display: none !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 9px !important; padding: 14px !important; max-height: calc(100vh - 86px) !important; overflow-y: auto !important; background: rgba(17,17,29,0.98) !important; border: 1px solid rgba(255,255,255,0.09) !important; border-top: 0 !important; border-radius: 0 0 24px 24px !important; box-shadow: 0 24px 60px rgba(0,0,0,0.36) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 9900 !important; }
  body.light-mode header.app-header nav#mainNav.nav, body.light-mode header.app-header nav#mainNav.nav:not(.active) { background: rgba(255,255,255,0.98) !important; border-color: rgba(20,30,60,0.10) !important; box-shadow: 0 24px 60px rgba(30,45,70,0.15) !important; }
  header.app-header nav#mainNav.nav.active, body.mobile-nav-open header.app-header nav#mainNav.nav.active { display: flex !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
  header.app-header nav#mainNav.nav > a.top-nav-link, header.app-header nav#mainNav.nav > a { width: 100% !important; max-width: none !important; height: 48px !important; justify-content: flex-start !important; padding: 0 16px !important; border-radius: 16px !important; background: rgba(255,255,255,0.035) !important; }
  header.app-header #mainNav > .nav-parent, header.app-header #ecosystemMenu { width: 100% !important; display: block !important; }
  header.app-header .nav-parent-trigger { width: 100% !important; max-width: none !important; grid-template-columns: auto minmax(0, 1fr) 34px !important; justify-content: stretch !important; }
  header.app-header .nav-parent-title { max-width: none !important; }
  header.app-header .nav-parent-menu { position: static !important; display: none !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-top: 10px !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
  header.app-header .nav-parent.open .nav-parent-menu { display: block !important; }
  header.app-header .nav-parent:hover .nav-parent-menu { display: none !important; }
  header.app-header .nav-parent.open:hover .nav-parent-menu { display: block !important; }
  header.app-header .nav-parent-menu::before { display: none !important; }
  header.app-header .mobile-menu-toggle { display: inline-flex !important; }
  header.app-header .header-actions { justify-self: end !important; }
}
@media (max-width: 1080px) { header.app-header .chain-switcher { width: clamp(180px, 22vw, 220px) !important; min-width: 170px !important; } header.app-header .btn-connect { min-width: 128px !important; max-width: 190px !important; padding-inline: 14px !important; } header.app-header .btn-disconnect { min-width: 104px !important; padding-inline: 14px !important; } }
@media (max-width: 860px) {
  body header.app-header { grid-template-columns: 1fr !important; grid-template-areas: "brand" "actions" !important; gap: 10px !important; padding: 12px 14px !important; }
  header.app-header .logo-container { justify-content: center !important; }
  header.app-header .logo-container img, header.app-header #logo { height: 34px !important; max-width: 154px !important; }
  header.app-header .header-actions { width: 100% !important; justify-self: stretch !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto auto !important; gap: 8px !important; }
  header.app-header .chain-switcher, header.app-header .btn-connect { width: 100% !important; min-width: 0 !important; max-width: none !important; }
  header.app-header .btn-disconnect { display: none !important; }
  header.app-header nav#mainNav.nav, header.app-header nav#mainNav.nav:not(.active) { left: 10px !important; right: 10px !important; max-height: calc(100vh - 132px) !important; }
}
@media (max-width: 560px) {
  body header.app-header { padding: 10px 10px !important; }
  header.app-header .logo-container img, header.app-header #logo { height: 31px !important; max-width: 140px !important; }
  header.app-header .header-actions { grid-template-columns: minmax(0, 1fr) 44px 44px !important; }
  header.app-header .chain-switcher { grid-column: 1 / 2 !important; }
  header.app-header .btn-theme { grid-column: 2 / 3 !important; }
  header.app-header .mobile-menu-toggle { grid-column: 3 / 4 !important; }
  header.app-header .btn-connect { grid-column: 1 / -1 !important; height: 44px !important; min-height: 44px !important; }
  header.app-header .chain-switcher-trigger, header.app-header .btn-theme, header.app-header .mobile-menu-toggle { height: 44px !important; min-height: 44px !important; }
  header.app-header .btn-theme, header.app-header .mobile-menu-toggle { width: 44px !important; min-width: 44px !important; }
  header.app-header .chain-switcher-trigger > .nav-parent-kicker { display: none !important; }
  header.app-header .chain-switcher-value { font-size: .88rem !important; }
}

/* Header breakpoint correction: the old platform CSS already collapses nav near laptop widths; keep the drawer button visible there too. */
@media (min-width: 1641px) {
  header.app-header .mobile-menu-toggle { display: none !important; }
}
@media (max-width: 1640px) {
  body header.app-header {
    grid-template-columns: auto minmax(0, 1fr) !important;
    grid-template-areas: "brand actions" !important;
    min-height: 78px !important;
  }
  header.app-header nav#mainNav.nav,
  header.app-header nav#mainNav.nav:not(.active) {
    position: absolute !important;
    top: calc(100% + 1px) !important;
    left: clamp(12px, 2vw, 28px) !important;
    right: clamp(12px, 2vw, 28px) !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 14px !important;
    max-height: calc(100vh - 86px) !important;
    overflow-y: auto !important;
    background: rgba(17,17,29,0.98) !important;
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-top: 0 !important;
    border-radius: 0 0 24px 24px !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.36) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 9900 !important;
  }
  body.light-mode header.app-header nav#mainNav.nav,
  body.light-mode header.app-header nav#mainNav.nav:not(.active) {
    background: rgba(255,255,255,0.98) !important;
    border-color: rgba(20,30,60,0.10) !important;
  }
  header.app-header nav#mainNav.nav.active,
  body.mobile-nav-open header.app-header nav#mainNav.nav.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  header.app-header .mobile-menu-toggle { display: inline-flex !important; }
}

/* =====================================================================
   MOBILE HAMBURGER FINAL FIX — contained three-line icon
   Fixes Safari/iPhone rendering where pseudo bars inherited old rules and
   escaped the circular menu button.
   ===================================================================== */
header.app-header .mobile-menu-toggle,
body header.app-header .mobile-menu-toggle {
  position: relative !important;
  overflow: hidden !important;
  flex: 0 0 46px !important;
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

header.app-header .mobile-menu-toggle .menu-bars,
body header.app-header .mobile-menu-toggle .menu-bars {
  position: absolute !important;
  display: block !important;
  left: 50% !important;
  top: 50% !important;
  width: 20px !important;
  height: 2px !important;
  min-width: 0 !important;
  max-width: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transition: transform .24s ease, opacity .18s ease, background .2s ease !important;
}

header.app-header .mobile-menu-toggle .menu-bars::before,
header.app-header .mobile-menu-toggle .menu-bars::after,
body header.app-header .mobile-menu-toggle .menu-bars::before,
body header.app-header .mobile-menu-toggle .menu-bars::after {
  content: "" !important;
  position: absolute !important;
  display: block !important;
  left: 0 !important;
  top: 0 !important;
  width: 20px !important;
  height: 2px !important;
  min-width: 0 !important;
  max-width: 20px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform-origin: center !important;
  box-shadow: none !important;
}

header.app-header .mobile-menu-toggle .menu-bars::before,
body header.app-header .mobile-menu-toggle .menu-bars::before {
  transform: translateY(-7px) !important;
}

header.app-header .mobile-menu-toggle .menu-bars::after,
body header.app-header .mobile-menu-toggle .menu-bars::after {
  transform: translateY(7px) !important;
  width: 14px !important;
  left: 6px !important;
}

header.app-header .mobile-menu-toggle.is-open .menu-bars,
body.mobile-nav-open header.app-header .mobile-menu-toggle .menu-bars {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

header.app-header .mobile-menu-toggle.is-open .menu-bars::before,
body.mobile-nav-open header.app-header .mobile-menu-toggle .menu-bars::before {
  transform: translateY(0) rotate(90deg) !important;
}

header.app-header .mobile-menu-toggle.is-open .menu-bars::after,
body.mobile-nav-open header.app-header .mobile-menu-toggle .menu-bars::after {
  opacity: 0 !important;
  transform: translateY(0) scaleX(.2) !important;
}

@media (max-width: 560px) {
  header.app-header .mobile-menu-toggle,
  body header.app-header .mobile-menu-toggle {
    flex-basis: 44px !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  header.app-header .mobile-menu-toggle .menu-bars,
  body header.app-header .mobile-menu-toggle .menu-bars,
  header.app-header .mobile-menu-toggle .menu-bars::before,
  header.app-header .mobile-menu-toggle .menu-bars::after,
  body header.app-header .mobile-menu-toggle .menu-bars::before,
  body header.app-header .mobile-menu-toggle .menu-bars::after {
    width: 19px !important;
    max-width: 19px !important;
  }

  header.app-header .mobile-menu-toggle .menu-bars::after,
  body header.app-header .mobile-menu-toggle .menu-bars::after {
    width: 13px !important;
    left: 6px !important;
  }
}

/* =====================================================================
   MAPLEFI MOBILE CHAIN SELECTOR SHEET FIX
   Fixes Base Sepolia dropdown text cutting on iPhone/Safari by rendering
   the network list as a viewport-safe sheet with full readable labels.
   ===================================================================== */
@media (max-width: 860px) {
  header.app-header .chain-switcher.open {
    z-index: 10050 !important;
  }

  header.app-header .chain-switcher-menu {
    position: fixed !important;
    top: var(--mf-chain-menu-top, 150px) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: calc(100dvh - var(--mf-chain-menu-top, 150px) - 18px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 12px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255, 158, 77, 0.22) !important;
    background:
      radial-gradient(circle at 14% 0%, rgba(255, 133, 74, 0.18), transparent 34%),
      radial-gradient(circle at 86% 8%, rgba(76, 201, 255, 0.14), transparent 30%),
      linear-gradient(180deg, rgba(12, 16, 32, 0.985), rgba(7, 11, 24, 0.985)) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.07) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
    z-index: 10060 !important;
  }

  body.light-mode header.app-header .chain-switcher-menu {
    background:
      radial-gradient(circle at 14% 0%, rgba(255, 133, 74, 0.10), transparent 34%),
      radial-gradient(circle at 86% 8%, rgba(76, 201, 255, 0.10), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,0.99), rgba(244,247,255,0.985)) !important;
    border-color: rgba(20,30,60,0.10) !important;
    box-shadow: 0 24px 56px rgba(32,45,78,0.18), inset 0 1px 0 rgba(255,255,255,0.90) !important;
  }

  header.app-header .chain-switcher.open .chain-switcher-menu {
    display: grid !important;
    gap: 10px !important;
  }

  header.app-header .chain-option {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: start !important;
    gap: 10px !important;
    min-height: 74px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }

  header.app-header .chain-option-main {
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  header.app-header .chain-option-title,
  header.app-header .chain-option-subtitle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  header.app-header .chain-option-title {
    font-size: 1.02rem !important;
    line-height: 1.18 !important;
    margin-bottom: 6px !important;
  }

  header.app-header .chain-option-subtitle {
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
    opacity: 0.82 !important;
  }

  header.app-header .chain-option-badge {
    justify-self: end !important;
    max-width: 118px !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.15 !important;
    padding: 7px 9px !important;
  }
}

@media (max-width: 430px) {
  header.app-header .chain-switcher-menu {
    left: 10px !important;
    right: 10px !important;
    padding: 10px !important;
    border-radius: 20px !important;
  }

  header.app-header .chain-option {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  header.app-header .chain-option-badge {
    justify-self: start !important;
    max-width: 100% !important;
  }
}


/* Wallet connection state hardening: keep Disconnect hidden until an actual account is connected.
   Earlier header button rules use display:inline-flex!important, so this override must be stronger. */
header.app-header #disconnectWallet[hidden],
header.app-header #disconnectWallet.is-wallet-hidden,
body header.app-header .btn-disconnect[hidden],
body header.app-header .btn-disconnect.is-wallet-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

header.app-header #connectWallet[data-connected="false"] {
  color: var(--mf-header-text) !important;
}

header.app-header #connectWallet[data-connected="true"] {
  background: linear-gradient(135deg, rgba(44, 72, 118, 0.72), rgba(24, 34, 57, 0.82)) !important;
  border-color: rgba(115, 160, 255, 0.28) !important;
}

/* =====================================================================
   MAPLEVERSE DROPDOWN READABILITY FIX — no clipped/cut menu text
   Fixes desktop/laptop Explore dropdown where nav-wide white-space:nowrap
   was inherited by dropdown links and forced descriptions to clip.
   ===================================================================== */
header.app-header #ecosystemMenu,
header.app-header .nav-ecosystem {
  overflow: visible !important;
}

header.app-header #ecosystemMenuPanel.nav-parent-menu,
header.app-header .nav-parent-menu {
  box-sizing: border-box !important;
  width: clamp(390px, 28vw, 540px) !important;
  min-width: min(390px, calc(100vw - 32px)) !important;
  max-width: min(540px, calc(100vw - 32px)) !important;
  padding: 14px !important;
  overflow: visible !important;
  white-space: normal !important;
}

header.app-header #ecosystemMenuPanel .nav-parent-item,
header.app-header .nav-parent-menu .nav-parent-item {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 15px 16px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  contain: none !important;
}

header.app-header #ecosystemMenuPanel .nav-parent-item-title,
header.app-header #ecosystemMenuPanel .nav-parent-item-text,
header.app-header .nav-parent-menu .nav-parent-item-title,
header.app-header .nav-parent-menu .nav-parent-item-text {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

header.app-header #ecosystemMenuPanel .nav-parent-item-title,
header.app-header .nav-parent-menu .nav-parent-item-title {
  font-size: clamp(1rem, .92vw, 1.12rem) !important;
  line-height: 1.15 !important;
  margin-bottom: 6px !important;
}

header.app-header #ecosystemMenuPanel .nav-parent-item-text,
header.app-header .nav-parent-menu .nav-parent-item-text {
  font-size: clamp(.88rem, .78vw, .98rem) !important;
  line-height: 1.42 !important;
}

@media (min-width: 1181px) {
  header.app-header #ecosystemMenuPanel.nav-parent-menu {
    right: 0 !important;
    left: auto !important;
    transform: translateY(8px) !important;
  }
  header.app-header #ecosystemMenu.open #ecosystemMenuPanel.nav-parent-menu,
  header.app-header #ecosystemMenu:hover #ecosystemMenuPanel.nav-parent-menu {
    transform: translateY(0) !important;
  }
}

@media (max-width: 1180px) {
  header.app-header #ecosystemMenuPanel.nav-parent-menu,
  header.app-header .nav-parent-menu {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
}

@media (max-width: 560px) {
  header.app-header #ecosystemMenuPanel .nav-parent-item,
  header.app-header .nav-parent-menu .nav-parent-item {
    padding: 14px !important;
    border-radius: 16px !important;
  }
  header.app-header #ecosystemMenuPanel .nav-parent-item-title,
  header.app-header .nav-parent-menu .nav-parent-item-title {
    font-size: 1rem !important;
    line-height: 1.18 !important;
  }
  header.app-header #ecosystemMenuPanel .nav-parent-item-text,
  header.app-header .nav-parent-menu .nav-parent-item-text {
    font-size: .9rem !important;
    line-height: 1.38 !important;
  }
}


/* MapleFi live testnet token price card */
body.home-future .metric-card.token-price-spotlight {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 10%, rgba(255, 122, 54, 0.32), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(76, 201, 255, 0.26), transparent 38%),
        linear-gradient(180deg, rgba(24, 29, 57, 0.96), rgba(9, 14, 31, 0.94));
    border-color: rgba(255, 172, 99, 0.24);
    box-shadow: 0 20px 52px rgba(255, 122, 54, 0.12), inset 0 1px 0 rgba(255,255,255,0.08);
}
body.home-future .metric-card.token-price-spotlight::after {
    content: '';
    position: absolute;
    width: 120px;
    height: 120px;
    right: -44px;
    bottom: -52px;
    border-radius: 999px;
    background: conic-gradient(from 180deg, rgba(255,122,54,.42), rgba(76,201,255,.22), rgba(255,122,54,.42));
    filter: blur(2px);
    opacity: .72;
}
body.home-future .metric-card.token-price-spotlight strong,
body.home-future .metric-card.token-price-spotlight span,
body.home-future .metric-card.token-price-spotlight small {
    position: relative;
    z-index: 1;
}
body.home-future .metric-card.token-price-spotlight strong {
    font-size: clamp(1.5rem, 3.2vw, 2.1rem);
    letter-spacing: -0.045em;
    text-shadow: 0 0 28px rgba(255, 122, 54, 0.28);
}

/* DEX Control Center layout hardening — prevents live metric overflow and restores spacing. */
body.home-future .hero-dashboard,
body.home-future .dashboard-panel,
body.home-future .panel-metric-grid,
body.home-future .metric-card,
body.home-future .terminal-card,
body.home-future .hero-command-strip,
body.home-future .command-item {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

body.home-future .hero-dashboard {
  width: 100% !important;
  max-width: min(680px, 100%) !important;
}

body.home-future .dashboard-panel {
  width: 100% !important;
  max-width: 680px !important;
  padding: clamp(18px, 2vw, 30px) !important;
  overflow: hidden !important;
}

body.home-future .panel-topbar {
  align-items: flex-start !important;
  margin-bottom: 16px !important;
}

body.home-future .panel-topbar h3 {
  line-height: 1.12 !important;
  margin: 0 !important;
}

body.home-future .panel-metric-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 16px 0 14px !important;
  align-items: stretch !important;
}

body.home-future .metric-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  min-height: 132px !important;
  padding: 16px !important;
  overflow: hidden !important;
}

body.home-future .metric-card span,
body.home-future .metric-card small,
body.home-future .metric-card strong {
  max-width: 100% !important;
  min-width: 0 !important;
}

body.home-future .metric-card span {
  line-height: 1.25 !important;
  margin: 0 !important;
}

body.home-future .metric-card strong {
  font-size: clamp(1.05rem, 1.45vw, 1.58rem) !important;
  line-height: 1.12 !important;
  margin: 0 !important;
  letter-spacing: -0.025em !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

body.home-future .metric-card small {
  display: block !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

body.home-future #stat-liquidity,
body.home-future #stat-ratio {
  font-size: clamp(0.94rem, 1.05vw, 1.2rem) !important;
  letter-spacing: -0.015em !important;
}

body.home-future .metric-card.token-price-spotlight {
  grid-column: 1 / -1 !important;
  min-height: 148px !important;
  padding: clamp(18px, 2vw, 24px) !important;
}

body.home-future .metric-card.token-price-spotlight strong {
  font-size: clamp(1.5rem, 2.1vw, 2.12rem) !important;
  line-height: 1.05 !important;
}

body.home-future .terminal-card {
  margin-top: 14px !important;
  padding: 16px !important;
}

body.home-future .terminal-head {
  gap: 10px !important;
  margin-bottom: 12px !important;
}

body.home-future .terminal-rows {
  gap: 8px !important;
}

body.home-future .terminal-rows div {
  display: grid !important;
  grid-template-columns: minmax(96px, .55fr) minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 0 9px !important;
}

body.home-future .terminal-rows strong {
  min-width: 0 !important;
  text-align: right !important;
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
}

body.home-future .hero-command-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

body.home-future .command-item {
  padding: 12px !important;
  overflow: hidden !important;
}

body.home-future .command-item strong,
body.home-future .command-item span {
  overflow-wrap: anywhere !important;
  line-height: 1.25 !important;
}

@media (max-width: 1360px) {
  body.home-future .hero-dashboard,
  body.home-future .dashboard-panel {
    max-width: 760px !important;
    justify-self: center !important;
  }
}

@media (max-width: 760px) {
  body.home-future .hero-shell {
    grid-template-columns: 1fr !important;
  }

  body.home-future .hero-dashboard {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  body.home-future .dashboard-panel {
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }

  body.home-future .panel-metric-grid,
  body.home-future .hero-command-strip {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.home-future .metric-card,
  body.home-future .metric-card.token-price-spotlight {
    min-height: 118px !important;
  }

  body.home-future .terminal-head {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  body.home-future .terminal-rows div {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 4px !important;
  }

  body.home-future .terminal-rows strong {
    text-align: left !important;
  }
}

@media (max-width: 380px) {
  body.home-future .dashboard-panel {
    padding: 14px !important;
  }

  body.home-future .metric-card,
  body.home-future .terminal-card,
  body.home-future .command-item {
    padding: 13px !important;
  }

  body.home-future .metric-card strong {
    font-size: clamp(0.98rem, 6vw, 1.28rem) !important;
  }
}


/* ===== MAPLEFI PAGE WIDTH ALIGNMENT PATCH =====
   Keeps custom page shells aligned with the same 1480px/gutter system as index.html. */
body.genesis-page .gw-container,
body.team-page .team-container,
body.beta-guide-page .guide-wrap,
body.leaderboard-page .lb-shell,
body.admin-page .admin-shell,
.chain-ai-spotlight-inner,
.maple-agent-strip-inner,
.pools-container {
  width: min(calc(100% - (var(--mf-page-gutter) * 2)), var(--mf-page-max)) !important;
  max-width: var(--mf-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

@media (max-width: 700px) {
  body.genesis-page .gw-container,
  body.team-page .team-container,
  body.beta-guide-page .guide-wrap,
  body.leaderboard-page .lb-shell,
  body.admin-page .admin-shell,
  .chain-ai-spotlight-inner,
  .maple-agent-strip-inner,
  .pools-container {
    width: calc(100% - 32px) !important;
  }
}