@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * `.hidden` CONTRACT — project-wide, must stay at the TOP of this file.
 *
 * app.css is linked AFTER assets/tailwind-built.css, where `.hidden{display:none}`
 * lives. Any hand-written single-class rule here that declares `display` therefore
 * outranks it on source order at equal specificity, which silently turns
 * `classList.add('hidden')` into a no-op (that is how /earn once rendered the locked
 * verification block and the verified dashboard at the same time).
 *
 * The contract: the presence of `hidden` hides the element, whatever layout class it
 * also carries. Two deliberate escape hatches are preserved:
 *   1. Tailwind responsive display utilities still win at their breakpoint — that is
 *      the documented `hidden md:flex` pattern and the site header depends on it.
 *      They are re-declared below with `!important`, scoped through `:where(.hidden)`
 *      so specificity stays (0,1,0) and elements WITHOUT `hidden` are untouched.
 *      Only the variants Tailwind actually emits after `.hidden` are listed; keep this
 *      list in sync with assets/tailwind-built.css (test/hidden_contract.test.js
 *      fails if a new one appears).
 *   2. An explicit `!important` display rule later in this file still wins (e.g. the
 *      .fennec-desktop-nav header breakpoint contract at the bottom). That is why this
 *      block sits first: it must lose to intentional overrides and beat accidents.
 * ═══════════════════════════════════════════════════════════════════════════ */
.hidden {
    display: none !important;
}

@media (min-width: 640px) {
    .sm\:block:where(.hidden) {
        display: block !important;
    }
    .sm\:inline:where(.hidden) {
        display: inline !important;
    }
}

@media (min-width: 768px) {
    .md\:block:where(.hidden) {
        display: block !important;
    }
    .md\:flex:where(.hidden) {
        display: flex !important;
    }
}

@media (min-width: 1024px) {
    .lg\:block:where(.hidden) {
        display: block !important;
    }
    .lg\:grid:where(.hidden) {
        display: grid !important;
    }
}
/* ─── END OF THE `.hidden` CONTRACT BLOCK ─────────────────────────
 * Nothing below this marker may be a contract restore. test/hidden_contract.test.js
 * uses this exact string as the boundary when it diffs the restores above against the
 * display utilities tailwind-built.css emits after `.hidden`. Do not remove or reword
 * it without updating that test.
 * ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
    html,
    body,
    #sec-home {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* Vision rebuild final cascade. Keep this block last. */
#sec-home {
    isolation: isolate;
    overflow: hidden;
}

#sec-home .hero-fox-bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8, 4, 3, 0.34), rgba(8, 4, 3, 0.86) 72%, rgba(8, 4, 3, 0.98)),
        radial-gradient(circle at 50% 10%, rgba(255, 185, 92, 0.22), transparent 36%),
        url('../img/prime.webp') center 12% / cover no-repeat;
    opacity: 0.36;
    filter: saturate(0.82) contrast(1.05);
    -webkit-mask-image: none;
    mask-image: none;
}

#sec-home .hero-fox-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 24%, rgba(255, 107, 53, 0.18), transparent 30%),
        radial-gradient(circle at 88% 36%, rgba(56, 189, 248, 0.08), transparent 28%),
        linear-gradient(90deg, rgba(8, 4, 3, 0.92), rgba(8, 4, 3, 0.4) 48%, rgba(8, 4, 3, 0.94));
}


@media (max-width: 760px) {
    #sec-home .hero-fox-bg {
        background-position: 52% 0;
        opacity: 0.28;
    }

}

@media (max-width: 760px) {
    html,
    body,
    #sec-home {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* Vision page rebuild: mission-control premium direction */
#sec-home {
    isolation: isolate;
    overflow: hidden;
}

#sec-home .hero-fox-bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8, 4, 3, 0.34), rgba(8, 4, 3, 0.86) 72%, rgba(8, 4, 3, 0.98)),
        radial-gradient(circle at 50% 10%, rgba(255, 185, 92, 0.22), transparent 36%),
        url('../img/prime.webp') center 12% / cover no-repeat;
    opacity: 0.36;
    filter: saturate(0.82) contrast(1.05);
    -webkit-mask-image: none;
    mask-image: none;
}

#sec-home .hero-fox-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 24%, rgba(255, 107, 53, 0.18), transparent 30%),
        radial-gradient(circle at 88% 36%, rgba(56, 189, 248, 0.08), transparent 28%),
        linear-gradient(90deg, rgba(8, 4, 3, 0.92), rgba(8, 4, 3, 0.4) 48%, rgba(8, 4, 3, 0.94));
}


@media (max-width: 760px) {
    #sec-home .hero-fox-bg {
        background-position: 52% 0;
        opacity: 0.28;
    }

}

/* Custom fee input layout fixes */
#dep-fee-custom,
#wd-fee-custom {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
}
#dep-fee-custom-input,
#wd-fee-custom-input {
    width: 100%;
    max-width: 110px;
    box-sizing: border-box;
    padding: 3px 6px;
    line-height: 1.2;
}

@keyframes tickerScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.ticker-content {
    display: block;
    white-space: nowrap;
}

#liveTicker {
    padding-left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    flex: 1 1 auto;
    overflow: hidden;
}

#liveTicker .ticker-marquee {
    display: inline-flex;
    align-items: center;
    width: max-content;
    will-change: transform;
    animation: tickerScroll var(--ticker-duration, 30s) linear infinite;
    backface-visibility: hidden;
}

#liveTicker {
    position: relative;
    min-height: 28px;
    overflow: hidden;
}

/* Mobile pairs sheet */
.mobile-sort-btn.active {
    color: #ff6b35;
    border-color: rgba(255, 107, 53, 0.3);
    background: rgba(255, 107, 53, 0.1);
}

#fennecIdIframeSlot {
    transition: opacity 0.2s ease-out;
}

#fennecIdIframeContainer.iframe-loaded #fennecIdIframeSlot {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#fennecIdIframeContainer.iframe-loaded #fennecIdLoadingRoot {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

#liveTicker .ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    line-height: 1;
}

#liveTicker .ticker-divider {
    display: inline-flex;
    align-items: center;
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 1px;
    margin: 0 16px;
    position: relative;
    top: -1px;
    flex: 0 0 auto;
}
#liveTicker .ticker-group-sep {
    display: inline-flex;
    align-items: center;
    width: 3px;
    height: 16px;
    background: rgba(255, 107, 53, 0.5);
    border-radius: 2px;
    margin: 0 28px;
    position: relative;
    top: -1px;
    flex: 0 0 auto;
    box-shadow: 0 0 8px rgba(255, 107, 53, 0.3);
}

#liveTicker .ticker-item img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* Honest ticker "NEW LAUNCH" live-dot marker */
.fh-lz-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff6b35;
    box-shadow: 0 0 8px #ff6b35;
    flex: 0 0 auto;
}

#liveTickerBar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
}

:root {
    --bg-primary: #000;
    --bg-secondary: #0c0c0c;
    --bg-tertiary: #1e1f24;
    --text-primary: #fff;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-muted: rgba(255, 255, 255, 0.5);
    --border-color: rgba(255, 255, 255, 0.1);
    --overlay-bg: rgba(0, 0, 0, 0.92);
}

[data-theme='light'] {
    --bg-primary: #f5f5f5;
    --bg-secondary: #fff;
    --bg-tertiary: #fafafa;
    --text-primary: #1a1a1a;
    --text-secondary: rgba(0, 0, 0, 0.8);
    --text-muted: rgba(0, 0, 0, 0.5);
    --border-color: rgba(0, 0, 0, 0.1);
    --overlay-bg: rgba(255, 255, 255, 0.95);
}

/* DESIGN: GOLDEN FLOW */
/* DESIGN: GOLDEN HOUR DESERT */
body {
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 107, 53, 0.12) 0%, transparent 55%),
        radial-gradient(circle at 70% 80%, rgba(255, 180, 120, 0.08) 0%, transparent 60%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 70%), #090706;
    color: #f3f3f3;
    min-height: 100vh;
    scrollbar-gutter: stable;
}

body > header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

html {
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.06'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: soft-light;
    filter: sepia(0.35) saturate(1.35) brightness(1.1);
}

.hero-fox-bg {
    display: none; /* Убран фоновый логотип */
    -webkit-mask-image: radial-gradient(circle, black 30%, transparent 70%);
    mask-image: radial-gradient(circle, black 30%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    filter: sepia(0.5) contrast(1.2);
}

.glass-panel {
    background: rgba(60, 48, 42, 0.32);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: none;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 0 0 1px rgba(255, 107, 53, 0.1);
}

.text-glow {
    text-shadow: 0 0 30px rgba(255, 107, 53, 0.4);
}

/* GLASS CARD */
.glass {
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.9);
    border-radius: 24px;
}
/* Fallback CSS Ears if image missing */
.fennec-art:empty::before,
.fennec-art:empty::after {
    content: '';
    position: absolute;
    bottom: 0;
    background: linear-gradient(to top, #5d4037, #ff6b35);
    border-radius: 50% 100% 0 0;
    border: 3px solid #3e2723;
    box-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
}
.fennec-art:empty::before {
    right: 80px;
    width: 80px;
    height: 220px;
    transform: rotate(-15deg);
}
.fennec-art:empty::after {
    right: 10px;
    width: 90px;
    height: 200px;
    transform: rotate(10deg);
}

/* UI */
.glass-card {
    background: rgba(20, 20, 20, 0.85);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.9);
}
.input-box {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.2s;
}
.input-box:focus-within {
    border-color: #ff6b35;
    background: rgba(0, 0, 0, 0.7);
}

/* Hide number input spinners */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.tab-btn {
    cursor: pointer;
    padding: 14px;
    font-weight: 800;
    color: #999;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
}
.tab-btn:hover {
    color: #fff;
}
.tab-btn.active {
    color: #ff6b35;
    border-color: #ff6b35;
    background: linear-gradient(to top, rgba(255, 107, 53, 0.1), transparent);
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-out;
}
.tab-content.active {
    display: block;
}
.tab-content.hidden {
    display: none !important;
}

.card-tab-btn {
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.07);
}
.card-tab-btn.active {
    color: #ff6b35;
    border-color: rgba(255, 107, 53, 0.32);
}

.card-tab-content {
    display: block;
    animation: fadeIn 0.3s ease-out;
}
.card-tab-content.hidden {
    display: none !important;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Page Sections */
.page-section {
    display: none !important;
}
.page-section.active {
    display: flex !important;
}
#sec-terminal.page-section.active {
    display: block !important;
}
.nav-link.active {
    color: #ff6b35;
    border-bottom: 2px solid #ff6b35;
}
.roadmap-line {
    position: absolute;
    left: 23px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #ff6b35, transparent);
}

/* Mobile Navigation - Always show VISION/TERMINAL/FENNEC ID */
@media (max-width: 768px) {
    header .max-w-6xl {
        grid-template-columns: auto 1fr auto;
        height: 56px; gap: 8px; padding-top: 0; padding-bottom: 0;
    }
    header a.flex.items-center.gap-3 { order: 0; justify-self: start; }
    #mobileMenuBtn { order: 1; justify-self: center; }
    header .flex.items-center.gap-3.justify-self-end { order: 2; justify-self: end; flex-wrap: nowrap; gap: 8px !important; }

    header nav:not(.hidden) {
        display: flex !important;
        gap: 16px !important;
        justify-content: center;
        order: 2;
    }

    .nav-link {
        font-size: 10px !important;
        padding: 8px 0 !important;
    }
}

@media (max-width: 520px) {
    /* Hide social icons only on narrow screens to avoid layout jumps */
    header a[href*='twitter'],
    header a[href*='telegram'] {
        display: none;
    }
}

/* Responsive adjustments for all sections */
@media (max-width: 768px) {
    .glass-panel {
        padding: 16px !important;
    }

    #chartPrice {
        font-size: 24px !important;
    }

    .chart-container {
        height: 200px !important;
    }

    /* Market stats responsive */
    #volume24h,
    #volume7d,
    #volume30d,
    #marketCap {
        font-size: 14px !important;
    }

    /* Terminal tabs */
    .tab-btn {
        font-size: 10px !important;
        padding: 10px 4px !important;
    }

    /* Input boxes */
    .input-box input {
        font-size: 14px !important;
    }

    /* Buttons — only apply to primary action buttons, not all buttons */
    .btn-primary,
    .btn-action,
    #btnSwap,
    #btnDeposit,
    #btnWithdraw {
        font-size: 12px !important;
        padding: 12px 16px !important;
    }

    /* Hero section */
    .hero-fox-bg {
        display: none;
    }

    /* Hero title */
    .text-5xl.md\:text-7xl {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
    }

    /* Hero description */
    .text-lg {
        font-size: 1rem !important;
    }

    /* Features grid - stack on mobile */
    .grid.grid-cols-1.md\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Page sections padding */
    .page-section {
        padding-top: 100px !important;
        padding-bottom: 60px !important;
    }

    /* Swap interface adjustments */
    .flex.flex-col.md\:flex-row {
        flex-direction: column !important;
    }

    /* Market stats grid */
    .grid.grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .grid.grid-cols-4 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important;
    }

    .grid.grid-cols-3 > div {
        padding: 8px !important;
    }

    .grid.grid-cols-3 .text-lg {
        font-size: 0.9rem !important;
    }

    /* Timeframe buttons */
    .flex.gap-2 button {
        padding: 6px 10px !important;
        font-size: 10px !important;
    }

    /* Vision Features cards */
    .grid.gap-6 > div {
        padding: 16px !important;
    }

    .grid.gap-6 h3 {
        font-size: 1.1rem !important;
    }

    .grid.gap-6 p {
        font-size: 0.9rem !important;
    }

    /* Roadmap items */
    .roadmap-item {
        padding: 16px !important;
    }

    .roadmap-item h4 {
        font-size: 1rem !important;
    }

    /* Live ticker */
    #liveTickerBar {
        height: 24px !important;
    }

    #liveTicker {
        font-size: 11px !important;
        line-height: 24px !important;
    }

    #liveTicker img {
        width: 16px !important;
        height: 16px !important;
    }

    /* Swap pairs */
    .flex.gap-2.mb-4 > div {
        padding: 12px 8px !important;
        font-size: 11px !important;
    }

    /* Swap input containers */
    .bg-black\/40.rounded-xl {
        padding: 12px !important;
    }

    .bg-black\/40 input {
        font-size: 24px !important;
    }

    /* Token icons and tickers */
    #iconIn,
    #iconOut {
        width: 20px !important;
        height: 20px !important;
    }

    #tickerIn,
    #tickerOut {
        font-size: 12px !important;
    }

    /* Switch direction button */
    button[onclick='switchDir()'] {
        padding: 10px !important;
    }

    /* Liquidity info */
    #liquidityInfo {
        font-size: 10px !important;
    }

    /* Wallet button */
    #walletBtn {
        font-size: 11px !important;
        padding: 8px 12px !important;
    }

    /* Language switcher */
    #languageBtn {
        font-size: 10px !important;
        padding: 6px 10px !important;
    }
}

/* Tablet responsive (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .max-w-4xl,
    .max-w-5xl,
    .max-w-6xl {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* Hero title on tablets */
    .text-5xl.md\:text-7xl {
        font-size: 3.5rem !important;
    }

    /* Navigation */
    .nav-link {
        font-size: 11px !important;
    }

    /* Chart container */
    .chart-container {
        height: 250px !important;
    }

    /* Glass panels */
    .glass-panel {
        padding: 20px !important;
    }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 20px !important;
    }

    h2 {
        font-size: 18px !important;
    }

    h3 {
        font-size: 16px !important;
    }

    .max-w-4xl,
    .max-w-5xl,
    .max-w-6xl {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Hero title on very small screens */
    .text-5xl.md\:text-7xl {
        font-size: 2rem !important;
    }

    /* Hero buttons */
    .flex.flex-col.md\:flex-row button {
        padding: 14px 20px !important;
        font-size: 14px !important;
    }

    /* Market stats - stack vertically */
    .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Market stats in terminal - smaller font */
    .grid.grid-cols-3 {
        gap: 6px !important;
    }

    .grid.grid-cols-3 .text-lg {
        font-size: 0.8rem !important;
    }

    .grid.grid-cols-3 .text-\[10px\] {
        font-size: 8px !important;
    }

    /* Chart price */
    #chartPrice {
        font-size: 20px !important;
    }

    /* Navigation links even smaller */
    .nav-link {
        font-size: 9px !important;
        gap: 12px !important;
    }

    /* Features grid - stack vertically */
    .grid.grid-cols-1.md\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .grid.grid-cols-1.md\:grid-cols-4 .glass-panel {
        padding: 16px !important;
    }

    .grid.grid-cols-1.md\:grid-cols-4 h3 {
        font-size: 16px !important;
    }

    .grid.grid-cols-1.md\:grid-cols-4 p {
        font-size: 12px !important;
    }

    /* Fennec ID section */
    #sec-audit h2 {
        font-size: 28px !important;
    }

    #auditContainer {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    #auditContainer iframe,
    #auditContainer canvas {
        transform: scale(0.75) !important;
        transform-origin: center top !important;
    }

    /* Burrow canvas */
    #sec-burrow h2 {
        font-size: 28px !important;
    }

    .glass-panel.h-\[400px\] {
        height: 250px !important;
    }

    /* Modal boxes */
    .modal-box {
        max-width: 90vw !important;
        padding: 20px !important;
    }

    .modal-box h3 {
        font-size: 16px !important;
    }

    .modal-box p {
        font-size: 11px !important;
    }

    /* Buttons */
    button.px-8.py-4 {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }

    /* Hero heading */
    h1.text-5xl {
        font-size: 36px !important;
    }

    /* Hero description */
    .text-gray-300.text-lg {
        font-size: 14px !important;
    }

    /* Section titles */
    h2.text-4xl {
        font-size: 24px !important;
    }

    h2.text-5xl {
        font-size: 28px !important;
    }

    /* Padding adjustments */
    .pt-32 {
        padding-top: 80px !important;
    }

    .pb-24 {
        padding-bottom: 60px !important;
    }

    /* Max widths */
    .max-w-5xl,
    .max-w-4xl {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Vision page buttons */
    #visionFennecIdBtn,
    button[onclick*="showSection('terminal')"] {
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    /* Grid layouts */
    .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

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

    /* Gap adjustments */
    .gap-8 {
        gap: 16px !important;
    }

    .gap-6 {
        gap: 12px !important;
    }

    /* Terminal sections */
    .glass-panel {
        padding: 16px !important;
    }

    /* Swap interface */
    .swap-section {
        padding: 12px !important;
    }

    /* Text sizes in swap */
    .swap-section .text-4xl {
        font-size: 24px !important;
    }

    .swap-section .text-2xl {
        font-size: 18px !important;
    }
}

/* Modals */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    padding: 24px 16px;
}
.modal-overlay.hidden {
    display: none !important;
}
.modal-box {
    background: #111;
    border: 1px solid #333;
    padding: 32px;
    border-radius: 24px;
    width: 90%;
    max-width: 420px;
    max-height: calc(100vh - 48px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 0 60px rgba(255, 107, 53, 0.15);
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */

/* Skeleton Loaders */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
    height: 20px;
}

.loading-data .balance-value,
.loading-data .chart-container {
    opacity: 0.5;
    pointer-events: none;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Progress Bar */
.progress-bar {
    position: relative;
    height: 6px;
    background: linear-gradient(90deg, rgba(255, 107, 53, 0.1), rgba(168, 85, 247, 0.1), rgba(59, 130, 246, 0.1));
    border-radius: 8px;
    overflow: hidden;
    margin: 12px 0;
    box-shadow:
        0 0 20px rgba(255, 107, 53, 0.15),
        inset 0 1px 3px rgba(0, 0, 0, 0.3);
}
.progress-bar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: none;
    animation: none;
    opacity: 0;
}
@keyframes shimmer-bg {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}
.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 107, 53, 0.95), rgba(255, 78, 0, 0.95));
    background-size: 100% 100%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.45);
    animation: none;
}
@keyframes gradient-flow {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}
.progress-fill.indeterminate {
    width: 18%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 107, 53, 0.95) 45%,
        rgba(255, 107, 53, 0.95) 55%,
        transparent 100%
    );
    box-shadow: none;
    animation: progress-slide 1.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes progress-slide {
    0% {
        left: -25%;
    }
    100% {
        left: 100%;
    }
}

/* Spinner */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ff6b35;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    vertical-align: middle;
}
@keyframes spin {
    100% {
        transform: rotate(360deg);
    }
}

/* Smooth transitions */
button,
.tab-btn,
.input-box {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
button:active {
    transform: scale(0.98);
}

/* STRONG NEON GLOW */
.neon-text {
    text-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #ff6b35,
        0 0 40px #ff6b35,
        0 0 80px #ff6b35;
}

.neon-logo {
    filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.8)) drop-shadow(0 0 20px rgba(255, 107, 53, 0.4));
    transition: all 0.3s ease;
}
.neon-logo:hover {
    filter: drop-shadow(0 0 15px rgba(255, 107, 53, 1)) drop-shadow(0 0 30px rgba(255, 107, 53, 0.6));
    transform: scale(1.05);
}

/* Hide scrollbar for pair bar */
.scrollbar-none::-webkit-scrollbar {
    display: none;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.5);
    border-radius: 4px;
    transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 53, 0.8);
}

/* ИСПРАВЛЕНИЕ: Ползунок на обратной стороне карточки справа */
/* ИСПРАВЛЕНИЕ: Скроллбар справа, текст по центру */
.achievement-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
}
.achievement-scroll > * {
    text-align: center !important; /* ИСПРАВЛЕНИЕ: Центрируем текст */
}
/* ИСПРАВЛЕНИЕ: Стилизация скроллбара справа */
.achievement-scroll::-webkit-scrollbar {
    width: 6px;
}
.achievement-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}
.achievement-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.5);
    border-radius: 3px;
}
.achievement-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 107, 53, 0.8);
}

/* Loading state */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Notifications */
#notificationsContainer {
    width: min(360px, 92vw);
    max-width: 92vw;
}
.notification {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(
        135deg,
        rgba(44, 26, 18, 0.96) 0%,
        rgba(30, 18, 12, 0.98) 50%,
        rgba(20, 15, 12, 0.99) 100%
    );
    border: 2px solid rgba(255, 107, 53, 0.5);
    padding: 20px 24px;
    border-radius: 18px;
    box-shadow:
        0 16px 56px rgba(0, 0, 0, 0.65),
        0 0 40px rgba(255, 107, 53, 0.3),
        0 0 80px rgba(255, 107, 53, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 107, 53, 0.1);
    z-index: 10000;
    min-width: 0;
    width: min(360px, 92vw);
    max-width: 92vw;
    box-sizing: border-box;
    margin-bottom: 12px;
    animation: slideIn 0.45s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    backdrop-filter: blur(28px) saturate(1.4);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.notification .notification-title {
    font-weight: 800;
    font-size: 14px;
    line-height: 1.25;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}
.notification .notification-time {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
}
.notification:hover {
    transform: scale(1.02);
    box-shadow:
        0 20px 64px rgba(0, 0, 0, 0.7),
        0 0 50px rgba(255, 107, 53, 0.4),
        0 0 100px rgba(255, 107, 53, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.notification-error {
    border-color: rgba(255, 90, 90, 0.7);
    box-shadow:
        0 16px 56px rgba(0, 0, 0, 0.65),
        0 0 40px rgba(255, 90, 90, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.notification-success {
    border-color: rgba(80, 220, 140, 0.7);
    box-shadow:
        0 16px 56px rgba(0, 0, 0, 0.65),
        0 0 40px rgba(80, 220, 140, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.notification-warning {
    border-color: rgba(255, 184, 74, 0.7);
    box-shadow:
        0 16px 56px rgba(0, 0, 0, 0.65),
        0 0 40px rgba(255, 184, 74, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
@keyframes slideIn {
    from {
        transform: translateY(-16px) scale(0.98);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

#successModal,
#errorModal {
    display: none !important;
}

/* ===== THE DIG ANIMATION ===== */
@keyframes digShake {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(-2px, 2px) rotate(-5deg);
    }
    50% {
        transform: translate(2px, -1px) rotate(5deg);
    }
    75% {
        transform: translate(-1px, 2px) rotate(-5deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}
@keyframes dirtFly {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-40px) translateX(20px) scale(1.2);
    }
}
/* ===== FOX EVOLUTION EFFECTS (3D CARD DESIGN) ===== */

/* === 3D CARD CONTAINER === */
/* ИСПРАВЛЕНИЕ: Полностью переписан CSS для стабильности 3D карточки */
/* === 3D CARD CONTAINER (ULTIMATE FIX) === */
.card-scene {
    perspective: 1200px;
    width: 336px;
    height: 490px; /* Чуть выше для лучшей компоновки */
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.card-scene,
.card-scene * {
    font-family:
        system-ui,
        -apple-system,
        'Segoe UI',
        Roboto,
        Arial,
        sans-serif;
}

.card-object {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: center center;
    transition: transform 620ms cubic-bezier(0.4, 0, 0.2, 1);
    --tiltX: 0deg;
    --tiltY: 0deg;
    --flipY: 0deg;
    transform: rotateX(var(--tiltX)) rotateY(calc(var(--tiltY) + var(--flipY)));
    border-radius: 20px;
    overflow: visible;
    will-change: transform;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

.card-object.flip-back {
    animation: flipBackAnimation 620ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes flipBackAnimation {
    from {
        --flipY: 180deg;
    }
    to {
        --flipY: 0deg;
    }
}

.card-object::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    z-index: 40;
    opacity: 0;
    mix-blend-mode: overlay;
    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.16),
            rgba(255, 255, 255, 0) 45%,
            rgba(255, 255, 255, 0.1) 55%,
            rgba(255, 255, 255, 0) 70%
        ),
        linear-gradient(45deg, rgba(255, 255, 255, 0.014), rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.01));
}

/* Золотая полоска убрана по запросу */

.card-object[data-tier='0'] {
    --tier-shine-opacity: 0;
    --tier-shine-dur: 999s;
}
.card-object[data-tier='1'] {
    --tier-shine-opacity: 0.28;
    --tier-shine-dur: 12s;
}
.card-object[data-tier='2'] {
    --tier-shine-opacity: 0.4;
    --tier-shine-dur: 9s;
}
.card-object[data-tier='3'] {
    --tier-shine-opacity: 0.52;
    --tier-shine-dur: 7.5s;
}

.card-object[data-vfx='MERCHANT'] {
    --tier-shine-rgb: 255, 215, 0;
}

@keyframes tierShineSweep {
    0% {
        left: -180%;
        opacity: 0;
    }
    18% {
        left: -180%;
        opacity: 0;
    }
    22% {
        left: -180%;
        opacity: var(--tier-shine-opacity, 0.22);
    }
    82% {
        left: 180%;
        opacity: var(--tier-shine-opacity, 0.22);
    }
    86% {
        left: 180%;
        opacity: 0;
    }
    100% {
        left: 180%;
        opacity: 0;
    }
}

.card-object.is-flipped {
    --flipY: 180deg;
}

/* ОБЩИЕ СТИЛИ СТОРОН */
.card-face {
    position: absolute;
    inset: 0; /* top:0, left:0, right:0, bottom:0 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 20px;
    overflow: hidden;
    background: transparent;
    transform: translateZ(0); /* Фикс для Safari */
}

/* ИСПРАВЛЕНИЕ: Обрезаем фон чтобы не выезжал за рамку - закругленные края как у рамки */
.card-face img {
    border-radius: 20px;
    clip-path: inset(0 round 20px);
}

/* ИСПРАВЛЕНИЕ: Градиентные оверлеи тоже должны быть закруглены */
.card-face > div[class*='bg-gradient'],
.card-face > div[style*='background'] {
    border-radius: 20px;
    clip-path: inset(0 round 20px);
}

/* ИСПРАВЛЕНИЕ: КРИТИЧЕСКОЕ - Правильная структура для 3D flip без отзеркаливания */
.face-back {
    transform: rotateY(180deg);
}

/* Переопределяем фон для rarity классов */
.card-scene:not([data-fennec-lib-root]) .card-face.card-cub {
    background: radial-gradient(circle at center, rgba(82, 82, 91, 0.15) 0%, rgba(0, 0, 0, 0.8) 70%);
}
.card-scene:not([data-fennec-lib-root]) .card-face.card-scout {
    background: radial-gradient(circle at center, rgba(34, 197, 94, 0.15) 0%, rgba(0, 0, 0, 0.8) 70%);
}
.card-scene:not([data-fennec-lib-root]) .card-face.card-hunter {
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.15) 0%, rgba(0, 0, 0, 0.8) 70%);
}
.card-scene:not([data-fennec-lib-root]) .card-face.card-alpha {
    background: radial-gradient(circle at center, rgba(239, 68, 68, 0.15) 0%, rgba(0, 0, 0, 0.8) 70%);
}
.card-scene:not([data-fennec-lib-root]) .card-face.card-elder {
    background: radial-gradient(circle at center, rgba(234, 179, 8, 0.2) 0%, rgba(0, 0, 0, 0.8) 70%);
}

/* ЛИЦЕВАЯ СТОРОНА */
.face-front {
    z-index: 2;
    transform: rotateY(0deg);
}

/* ЗАДНЯЯ СТОРОНА (TECH DATA DESIGN) */
.face-back {
    transform: rotateY(180deg);
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* Текстура заднего фона: темная сетка */
    background-color: transparent;
    background-image: none;
    background-size: auto;
}

/* Декоративный элемент сзади (чип) */
.face-back::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    display: none;
    background: none;
    pointer-events: none;
}

/* Стильный скроллбар для списка бейджей */
.custom-scroll {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ff6b35 rgba(255, 255, 255, 0.05);
}
.custom-scroll::-webkit-scrollbar {
    width: 4px;
}
.custom-scroll::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
.custom-scroll::-webkit-scrollbar-thumb {
    background-color: #ff6b35;
    border-radius: 10px;
}

/* Разделитель на задней стороне */
.tech-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    margin: 10px 0;
}

/* === PROGRESSIVE VISUAL EVOLUTION (TIER 0 - TIER 3) === */

/* База для плавности */
.card-face img {
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, filter;
}

.card-face [class^='overlay-'],
.card-face [class*=' overlay-'] {
    z-index: 12 !important;
}

.face [class^='overlay-'],
.face [class*=' overlay-'] {
    z-index: 12 !important;
}

.vfx-3d {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 13;
    display: block;
    opacity: calc(var(--vfx3d-opacity, 0.24) * var(--vfx3d-mult, 1));
    mix-blend-mode: screen;
    overflow: hidden;
}

.vfx-webgl {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 13;
    overflow: hidden;
    display: block;
    opacity: calc(var(--vfxwebgl-opacity, 0.18) * var(--vfxwebgl-mult, 1));
    mix-blend-mode: screen;
}
.vfx-webgl canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.card-object:not([data-vfx='ENGINEER']) .vfx-3d,
.card-object:not([data-vfx='ENGINEER']) .vfx-webgl {
    display: none !important;
}

.card-object[data-vfx='ENGINEER'][data-tier='2'] .vfx-3d,
.card-object[data-vfx='ENGINEER'][data-tier='3'] .vfx-3d {
    display: none !important;
}

.card-glare {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    pointer-events: none;
    mix-blend-mode: overlay;
    display: none !important;
    opacity: 0;
    transition: opacity 120ms linear;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 60%);
}
.vfx-3d::before {
    content: '';
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(
            circle at var(--mxp, 50%) var(--myp, 50%),
            rgba(var(--vfx-rgb, 255, 255, 255), 0.12),
            rgba(var(--vfx-rgb, 255, 255, 255), 0.06) 30%,
            transparent 65%
        ),
        linear-gradient(135deg, transparent, rgba(var(--vfx-rgb2, 255, 255, 255), 0.04), transparent);
    filter: blur(6px) saturate(1.05) brightness(1.02);
    transform: translate3d(calc(var(--npx, 0px) * 0.8), calc(var(--npy, 0px) * 0.8), 0);
    animation: vfx-pulse 4s ease-in-out infinite;
    opacity: 0.5;
}
.vfx-3d::after {
    content: '';
    position: absolute;
    inset: -15%;
    background:
        radial-gradient(
            circle at var(--mxp, 50%) var(--myp, 50%),
            rgba(var(--vfx-rgb, 255, 255, 255), 0.18),
            rgba(var(--vfx-rgb2, 255, 255, 255), 0.08) 35%,
            transparent 55%
        ),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 40%, rgba(255, 255, 255, 0.05) 60%, transparent);
    background-size:
        100% 100%,
        280% 280%;
    background-position:
        0 0,
        calc(var(--mxp, 50%) * 1%) calc(var(--myp, 50%) * 1%);
    mix-blend-mode: screen;
    filter: blur(2px);
    opacity: 0.4;
    transform: translate3d(calc(var(--px, 0px) * 0.8), calc(var(--py, 0px) * 0.8), 0) scale(1.02);
    animation:
        vfx-sheen 6s linear infinite,
        vfx-shimmer 3s ease-in-out infinite;
}

@keyframes vfx-sheen {
    0% {
        background-position:
            0 0,
            0% 0%,
            0 0;
    }
    100% {
        background-position:
            0 0,
            200% 200%,
            0 0;
    }
}
@keyframes vfx-pulse {
    0%,
    100% {
        opacity: 1;
        filter: blur(14px) saturate(1.6) brightness(1.3);
    }
    50% {
        opacity: 0.9;
        filter: blur(16px) saturate(1.8) brightness(1.45);
    }
}
@keyframes vfx-shimmer {
    0%,
    100% {
        opacity: 0.95;
    }
    50% {
        opacity: 1;
    }
}

.overlay-MERCHANT ~ .vfx-3d {
    --vfx-rgb: 255, 200, 0;
    --vfx-rgb2: 255, 230, 150;
    --vfx3d-mult: 0.55;
}
.overlay-SHAMAN ~ .vfx-3d {
    --vfx-rgb: 168, 85, 247;
    --vfx-rgb2: 59, 130, 246;
}
.overlay-KEEPER ~ .vfx-3d {
    --vfx-rgb: 251, 146, 60;
    --vfx-rgb2: 255, 255, 255;
    --vfx3d-mult: 0.6;
}
.overlay-LORD ~ .vfx-3d {
    --vfx-rgb: 6, 182, 212;
    --vfx-rgb2: 255, 255, 255;
}
.overlay-PRIME ~ .vfx-3d {
    --vfx-rgb: 255, 255, 255;
    --vfx-rgb2: 255, 255, 255;
}
.overlay-DRIFTER ~ .vfx-3d {
    --vfx-rgb: 255, 160, 0;
    --vfx-rgb2: 255, 255, 255;
}
.overlay-WALKER ~ .vfx-3d {
    --vfx-rgb: 59, 130, 246;
    --vfx-rgb2: 255, 255, 255;
}
.overlay-ENGINEER ~ .vfx-3d {
    --vfx-rgb: 0, 255, 170;
    --vfx-rgb2: 255, 0, 80;
}
.overlay-SINGULARITY ~ .vfx-3d {
    --vfx-rgb: 255, 255, 255;
    --vfx-rgb2: 168, 85, 247;
}

.overlay-MERCHANT ~ .vfx-webgl {
    --vfxwebgl-mult: 0.8;
}
.overlay-KEEPER ~ .vfx-webgl {
    --vfxwebgl-mult: 0.7;
}
.card-object[data-tier='3'] .overlay-ENGINEER ~ .vfx-3d {
    --vfx3d-mult: 1.24;
}
.card-object[data-tier='3'] .overlay-ENGINEER ~ .vfx-webgl {
    --vfxwebgl-mult: 1.13;
}

/* --- TIER 0: DORMANT (Новичок) --- */
/* Статичный, пыльный, старый вид */
.img-tier-0 {
    filter: grayscale(0.2) sepia(0.16) contrast(1) brightness(1) saturate(1.05);
    transform: scale(1.01);
}

/* --- TIER 1: AWAKENING (Адепт) --- */
/* Легкое "дыхание", возвращение цветов */
.anim-tier-1 {
    animation: breathe 10s ease-in-out infinite alternate;
}
@keyframes breathe {
    0% {
        filter: grayscale(0.08) contrast(1.02) brightness(1) saturate(1.04);
    }
    100% {
        filter: grayscale(0) contrast(1.06) brightness(1.06) saturate(1.1);
    }
}

/* --- TIER 2: EMPOWERED (Эксперт) --- */
/* Усиленные эффекты, специфичные для группы классов */

/* Drifter/Walker: Тепловая волна */
.anim-tier-2-heat {
    animation: heat-low 5s infinite alternate;
}
@keyframes heat-low {
    0% {
        filter: sepia(0.08) contrast(1.06) brightness(1.02) saturate(1.04);
    }
    100% {
        filter: sepia(0.16) contrast(1.1) brightness(1.05) saturate(1.06);
    }
}

/* Merchant/Lord: Мягкий блеск */
.anim-tier-2-shine {
    animation: shine-low 4s infinite alternate;
}
@keyframes shine-low {
    0% {
        filter: brightness(1.03) contrast(1.04) saturate(1.06);
    }
    100% {
        filter: brightness(1.1) contrast(1.06) saturate(1.12);
    }
}

/* Engineer: Микро-глитчи */
.anim-tier-2-glitch {
    animation: glitch-low 3s infinite;
}
@keyframes glitch-low {
    0%,
    92% {
        filter: contrast(1.12) brightness(1.03) saturate(1.08);
        transform: translate3d(0, 0, 0);
    }
    93% {
        filter: contrast(1.22) brightness(1.05) saturate(1.12) hue-rotate(3deg);
        transform: translate3d(1px, 0, 0);
    }
    94% {
        filter: contrast(1.22) brightness(1.05) saturate(1.12) hue-rotate(-3deg);
        transform: translate3d(-1px, 0, 0);
    }
    100% {
        filter: contrast(1.12) brightness(1.03) saturate(1.08);
        transform: translate3d(0, 0, 0);
    }
}

/* Shaman/Keeper/Prime: Пульсация ауры */
.anim-tier-2-magic {
    animation: magic-low 4s infinite alternate;
}
@keyframes magic-low {
    0% {
        filter: saturate(1.08) contrast(1.04) brightness(1.02);
    }
    100% {
        filter: saturate(1.16) contrast(1.06) brightness(1.06);
    }
}

/* --- TIER 3: UNLEASHED (Легенда - GOD MODE) --- */
/* Уникальная анимация для каждого архетипа + Оверлеи */

/* 1. DRIFTER */
.anim-DRIFTER {
    animation: drifter-dunes 10s ease-in-out infinite;
}
.overlay-DRIFTER {
    background: linear-gradient(to bottom, rgba(255, 160, 0, 0.1), transparent 70%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 5;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}
.overlay-DRIFTER::before {
    content: '';
    position: absolute;
    inset: -12%;
    background:
        radial-gradient(120% 60% at 10% 82%, rgba(255, 200, 120, 0.16) 0%, transparent 55%),
        radial-gradient(120% 60% at 90% 70%, rgba(255, 160, 0, 0.12) 0%, transparent 60%),
        linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
    background-size:
        140% 140%,
        140% 140%,
        240% 240%;
    background-position:
        0% 0%,
        100% 0%,
        0% 50%;
    opacity: 0.55;
    mix-blend-mode: overlay;
    animation: drifter-drift 9s linear infinite;
}
.overlay-DRIFTER::after {
    content: '';
    position: absolute;
    inset: -18%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
    opacity: 0.2;
    mix-blend-mode: screen;
    filter: blur(1px);
    animation: drifter-wind 6s ease-in-out infinite;
}
@keyframes drifter-dunes {
    0%,
    100% {
        filter: sepia(0.1) contrast(1.05) brightness(1.02) saturate(1.04);
    }
    50% {
        filter: sepia(0.16) contrast(1.08) brightness(1.05) saturate(1.07);
    }
}
@keyframes drifter-drift {
    0% {
        background-position:
            0% 0%,
            100% 0%,
            0% 50%;
    }
    100% {
        background-position:
            120% 10%,
            -20% -10%,
            200% 60%;
    }
}
@keyframes drifter-wind {
    0%,
    100% {
        transform: translate3d(-3%, 0, 0);
    }
    50% {
        transform: translate3d(3%, -1%, 0);
    }
}

/* 2. MERCHANT */
.anim-MERCHANT {
    animation: merchant-shine 5s ease-in-out infinite;
}
.overlay-MERCHANT {
    background: transparent;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 5;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}
.overlay-MERCHANT::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 80px;
    height: 400%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.4) 50%, transparent 70%);
    transform: rotate(45deg);
    animation: gold-sweep 6s ease-in-out infinite;
    filter: blur(3px);
}
.overlay-MERCHANT::after {
    content: '';
    position: absolute;
    inset: -15%;
    background:
        radial-gradient(60% 60% at 35% 35%, rgba(255, 255, 255, 0.12), transparent 68%),
        radial-gradient(70% 70% at 70% 65%, rgba(255, 215, 0, 0.1), transparent 72%),
        linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 60%, rgba(255, 215, 0, 0.03));
    opacity: 0.2;
    mix-blend-mode: screen;
    animation: sparkle-drift 5.2s ease-in-out infinite alternate;
    filter: blur(0.25px);
}
@keyframes merchant-shine {
    0%,
    100% {
        filter: contrast(1.05) brightness(1.02) saturate(1.06);
    }
    50% {
        filter: contrast(1.08) brightness(1.06) saturate(1.1) drop-shadow(0 0 8px rgba(255, 215, 0, 0.15));
    }
}
@keyframes gold-sweep {
    0%,
    100% {
        left: -100%;
        opacity: 0;
    }
    45% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    55% {
        opacity: 0;
    }
}
@keyframes sparkle-drift {
    0% {
        transform: translate3d(-1%, 1%, 0);
        opacity: 0.15;
    }
    100% {
        transform: translate3d(1%, -1%, 0);
        opacity: 0.25;
    }
}

/* 3. ENGINEER */
.anim-ENGINEER {
    animation: engineer-pulse 4s ease-in-out infinite;
}
.overlay-ENGINEER {
    background:
        repeating-linear-gradient(0deg, rgba(0, 255, 170, 0), rgba(0, 255, 170, 0) 10px, rgba(0, 255, 170, 0.1) 11px),
        repeating-linear-gradient(90deg, rgba(0, 255, 170, 0), rgba(0, 255, 170, 0) 14px, rgba(0, 200, 255, 0.08) 15px);
    z-index: 5;
    pointer-events: none;
    mix-blend-mode: overlay;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    opacity: 0.55;
}
.overlay-ENGINEER::before {
    content: '';
    position: absolute;
    inset: -10%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 50%, transparent 100%);
    opacity: 0.22;
    mix-blend-mode: screen;
    animation: engineer-scan 2.6s linear infinite;
    filter: blur(0.8px);
}
.overlay-ENGINEER::after {
    content: '';
    position: absolute;
    inset: -15%;
    background:
        radial-gradient(70% 60% at 35% 40%, rgba(0, 255, 170, 0.14), transparent 72%),
        radial-gradient(80% 70% at 70% 65%, rgba(0, 200, 255, 0.1), transparent 76%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 60%, rgba(0, 255, 170, 0.04));
    opacity: 0.18;
    mix-blend-mode: screen;
    animation: engineer-nodes 5.6s ease-in-out infinite alternate;
}
@keyframes engineer-pulse {
    0%,
    100% {
        filter: contrast(1.1) brightness(1.03) saturate(1.06);
    }
    50% {
        filter: contrast(1.16) brightness(1.06) saturate(1.12);
    }
}
@keyframes engineer-scan {
    0% {
        transform: translate3d(-120%, 0, 0);
    }
    100% {
        transform: translate3d(120%, 0, 0);
    }
}
@keyframes engineer-nodes {
    0% {
        transform: translate3d(-1%, 1%, 0);
        opacity: 0.14;
    }
    100% {
        transform: translate3d(1%, -1%, 0);
        opacity: 0.22;
    }
}
@keyframes engineer-glitch {
    0%,
    92% {
        filter: contrast(1.12) brightness(1.04) saturate(1.06);
        transform: translate3d(0, 0, 0);
    }
    94% {
        filter: contrast(1.3) brightness(1.07) saturate(1.15) hue-rotate(18deg);
        transform: translate3d(2px, 0, 0);
    }
    96% {
        filter: contrast(1.3) brightness(1.07) saturate(1.15) hue-rotate(-18deg);
        transform: translate3d(-2px, 0, 0);
    }
    98%,
    100% {
        filter: contrast(1.12) brightness(1.04) saturate(1.06);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes engineer-glitch-strong {
    0%,
    90% {
        filter: contrast(1.14) brightness(1.05) saturate(1.08);
        transform: translate3d(0, 0, 0);
    }
    92% {
        filter: contrast(1.46) brightness(1.1) saturate(1.26) hue-rotate(36deg);
        transform: translate3d(4px, -1px, 0);
    }
    94% {
        filter: contrast(1.46) brightness(1.1) saturate(1.26) hue-rotate(-36deg);
        transform: translate3d(-4px, 1px, 0);
    }
    96% {
        filter: contrast(1.32) brightness(1.08) saturate(1.18) hue-rotate(18deg);
        transform: translate3d(2px, 0, 0);
    }
    98%,
    100% {
        filter: contrast(1.14) brightness(1.05) saturate(1.08);
        transform: translate3d(0, 0, 0);
    }
}

.card-object[data-vfx='ENGINEER'][data-tier='2'] .overlay-ENGINEER {
    animation: engineer-glitch 3.2s ease-in-out infinite;
}
.card-object[data-vfx='ENGINEER'][data-tier='3'] .overlay-ENGINEER {
    animation: engineer-glitch-strong 3.2s ease-in-out infinite;
}

/* 4. SHAMAN */
.anim-SHAMAN {
    animation: shaman-tide 6s ease-in-out infinite;
}
.overlay-SHAMAN {
    background: radial-gradient(circle at 50% 55%, rgba(147, 51, 234, 0.14), transparent 62%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 5;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}
.overlay-SHAMAN::before {
    content: '';
    position: absolute;
    inset: -20%;
    background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.22) 0%, transparent 55%);
    opacity: 0.3;
    mix-blend-mode: screen;
    filter: blur(1.4px);
    animation: shaman-ripple 5s ease-in-out infinite;
}
.overlay-SHAMAN::after {
    content: '';
    position: absolute;
    inset: -25%;
    background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.16) 0%, transparent 60%);
    opacity: 0.24;
    mix-blend-mode: screen;
    filter: blur(1.6px);
    animation: shaman-ripple 5s ease-in-out infinite 0.7s;
}
@keyframes shaman-tide {
    0%,
    100% {
        filter: contrast(1.05) brightness(1.03) saturate(1.1);
    }
    50% {
        filter: contrast(1.1) brightness(1.06) saturate(1.18);
    }
}
@keyframes shaman-ripple {
    0% {
        transform: scale(0.85);
        opacity: 0.1;
    }
    55% {
        opacity: 0.36;
    }
    100% {
        transform: scale(1.35);
        opacity: 0.08;
    }
}

/* 5. KEEPER */
.anim-KEEPER {
    animation: keeper-runes 7s ease-in-out infinite;
}
.overlay-KEEPER {
    background: radial-gradient(circle at 50% 45%, rgba(251, 146, 60, 0.1), transparent 62%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 5;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}
.overlay-KEEPER::before {
    content: '';
    position: absolute;
    inset: -18%;
    background:
        radial-gradient(circle at 30% 40%, rgba(186, 85, 211, 0.12) 0%, transparent 42%),
        radial-gradient(circle at 70% 60%, rgba(251, 146, 60, 0.14) 0%, transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    opacity: 0.3;
    mix-blend-mode: screen;
    filter: blur(1.2px);
    animation: keeper-sigil 5.8s ease-in-out infinite;
}
.overlay-KEEPER::after {
    content: '';
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(70% 60% at 35% 40%, rgba(251, 146, 60, 0.14), transparent 72%),
        radial-gradient(80% 70% at 70% 65%, rgba(255, 255, 255, 0.1), transparent 76%),
        linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    opacity: 0.16;
    mix-blend-mode: screen;
    animation: keeper-dust 6s ease-in-out infinite alternate;
}
@keyframes keeper-runes {
    0%,
    100% {
        filter: sepia(0.05) contrast(1.06) brightness(1.02) saturate(1.06);
    }
    50% {
        filter: sepia(0.02) contrast(1.1) brightness(1.05) saturate(1.1);
    }
}
@keyframes keeper-sigil {
    0%,
    100% {
        transform: scale(0.98);
        opacity: 0.22;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.32;
    }
}

/* 6. WALKER */
.anim-WALKER {
    animation: walker-flow 7s ease-in-out infinite;
}
.overlay-WALKER {
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.14), transparent);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 5;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}
.overlay-WALKER::before {
    content: '';
    position: absolute;
    inset: -18%;
    background:
        radial-gradient(80% 60% at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 60%),
        radial-gradient(80% 60% at 80% 70%, rgba(59, 130, 246, 0.18) 0%, transparent 62%),
        radial-gradient(90% 70% at 50% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 66%);
    opacity: 0.38;
    mix-blend-mode: screen;
    filter: blur(1.4px);
    animation: walker-orbit 7.5s ease-in-out infinite;
}
.overlay-WALKER::after {
    content: '';
    position: absolute;
    inset: -22%;
    background: linear-gradient(140deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
    background-size: 220% 220%;
    opacity: 0.18;
    mix-blend-mode: screen;
    filter: blur(1px);
    animation: walker-sweep 9s linear infinite;
}
@keyframes walker-flow {
    0%,
    100% {
        filter: contrast(1.08) brightness(1.03) saturate(1.06);
    }
    50% {
        filter: contrast(1.12) brightness(1.06) saturate(1.1);
    }
}
@keyframes walker-orbit {
    0%,
    100% {
        transform: translate3d(-1%, 1%, 0) scale(1);
    }
    50% {
        transform: translate3d(1%, -1%, 0) scale(1.05);
    }
}
@keyframes walker-sweep {
    0% {
        background-position: 0% 40%;
    }
    100% {
        background-position: 200% 60%;
    }
}
.overlay-WALKER {
    background: linear-gradient(45deg, rgba(59, 130, 246, 0.14), transparent);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 5;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}
.overlay-WALKER::before {
    content: '';
    position: absolute;
    inset: -18%;
    background:
        radial-gradient(80% 60% at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 60%),
        radial-gradient(80% 60% at 80% 70%, rgba(59, 130, 246, 0.18) 0%, transparent 62%),
        radial-gradient(90% 70% at 50% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 66%);
    opacity: 0.38;
    mix-blend-mode: screen;
    filter: blur(1.4px);
    animation: walker-orbit 7.5s ease-in-out infinite;
}
.overlay-WALKER::after {
    content: '';
    position: absolute;
    inset: -22%;
    background: linear-gradient(140deg, transparent 0%, rgba(255, 255, 255, 0.05) 50%, transparent 100%);
    background-size: 220% 220%;
    opacity: 0.18;
    mix-blend-mode: screen;
    filter: blur(1px);
    animation: walker-sweep 9s linear infinite;
}
@keyframes walker-flow {
    0%,
    100% {
        filter: contrast(1.08) brightness(1.03) saturate(1.06);
    }
    50% {
        filter: contrast(1.12) brightness(1.06) saturate(1.1);
    }
}
@keyframes walker-orbit {
    0%,
    100% {
        transform: translate3d(-1%, 1%, 0) scale(1);
    }
    50% {
        transform: translate3d(1%, -1%, 0) scale(1.05);
    }
}
@keyframes walker-sweep {
    0% {
        background-position: 0% 40%;
    }
    100% {
        background-position: 200% 60%;
    }
}

/* 7. LORD */
.anim-LORD {
    animation: lord-crown 9s ease-in-out infinite;
}
.overlay-LORD {
    background: radial-gradient(circle at 50% 75%, rgba(234, 179, 8, 0.1), transparent 60%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 5;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}
.overlay-LORD::before {
    content: '';
    position: absolute;
    inset: -18%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        transparent 0deg,
        rgba(255, 215, 0, 0.12) 50deg,
        transparent 100deg,
        rgba(255, 215, 0, 0.1) 150deg,
        transparent 200deg,
        rgba(255, 215, 0, 0.12) 250deg,
        transparent 300deg,
        rgba(255, 215, 0, 0.1) 340deg,
        transparent 360deg
    );
    opacity: 0.22;
    mix-blend-mode: overlay;
    filter: blur(1.2px);
    animation: lord-rays 14s linear infinite;
}
.overlay-LORD::after {
    content: '';
    position: absolute;
    inset: -22%;
    background:
        radial-gradient(80% 70% at 30% 40%, rgba(255, 255, 255, 0.08) 0%, transparent 60%),
        radial-gradient(80% 70% at 70% 60%, rgba(255, 215, 0, 0.12) 0%, transparent 62%);
    opacity: 0.26;
    mix-blend-mode: screen;
    filter: blur(1.6px);
    animation: lord-breathe 6.2s ease-in-out infinite;
}
@keyframes lord-crown {
    0%,
    100% {
        filter: contrast(1.08) brightness(1.03) saturate(1.06);
    }
    50% {
        filter: contrast(1.12) brightness(1.06) saturate(1.1);
    }
}
@keyframes lord-rays {
    0% {
        transform: rotate(0deg) scale(1.02);
    }
    100% {
        transform: rotate(360deg) scale(1.02);
    }
}
@keyframes lord-breathe {
    0%,
    100% {
        transform: scale(0.98);
        opacity: 0.18;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.3;
    }
}

/* 8. PRIME */
.anim-PRIME {
    animation: prime-calm 7s ease-in-out infinite;
}
.overlay-PRIME {
    background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.1), transparent 70%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 5;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}
.overlay-PRIME::before {
    content: '';
    position: absolute;
    inset: -22%;
    background:
        radial-gradient(40% 40% at 20% 22%, rgba(255, 255, 255, 0.16), transparent 70%),
        radial-gradient(42% 42% at 78% 32%, rgba(168, 85, 247, 0.14), transparent 72%),
        radial-gradient(44% 44% at 60% 78%, rgba(59, 130, 246, 0.14), transparent 72%),
        radial-gradient(46% 46% at 34% 68%, rgba(255, 215, 0, 0.12), transparent 74%),
        radial-gradient(110% 80% at 50% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 62%);
    opacity: 0.26;
    mix-blend-mode: screen;
    filter: blur(0.6px);
    animation: prime-stars 3.8s ease-in-out infinite;
}
.overlay-PRIME::after {
    content: '';
    position: absolute;
    inset: -25%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.06) 50%, transparent 100%);
    background-size: 240% 240%;
    opacity: 0.14;
    mix-blend-mode: screen;
    filter: blur(1.1px);
    animation: prime-sweep 10s linear infinite;
}
@keyframes prime-calm {
    0%,
    100% {
        filter: brightness(1.06) contrast(1.05) saturate(1.05);
    }
    50% {
        filter: brightness(1.1) contrast(1.08) saturate(1.08);
    }
}
@keyframes prime-stars {
    0%,
    100% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.36;
    }
}
@keyframes prime-sweep {
    0% {
        background-position: 0% 40%;
    }
    100% {
        background-position: 200% 60%;
    }
}

/* 9. SINGULARITY */
.anim-SINGULARITY {
    animation: singularity-deep 10s ease-in-out infinite;
}
.overlay-SINGULARITY {
    background: radial-gradient(circle at 50% 55%, rgba(168, 85, 247, 0.1), transparent 60%);
    mix-blend-mode: overlay;
    opacity: 0.24;
    animation: singularity-spin 18s linear infinite;
    pointer-events: none;
    z-index: 5;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
}
.overlay-SINGULARITY::before {
    content: '';
    position: absolute;
    inset: -28%;
    background: conic-gradient(
        from 0deg at 50% 50%,
        rgba(59, 130, 246, 0),
        rgba(59, 130, 246, 0.1),
        rgba(168, 85, 247, 0),
        rgba(255, 107, 53, 0.08),
        rgba(59, 130, 246, 0)
    );
    opacity: 0.22;
    mix-blend-mode: overlay;
    filter: blur(2px);
    animation: singularity-spin 18s linear infinite reverse;
}
.overlay-SINGULARITY::after {
    content: '';
    position: absolute;
    inset: -18%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
        radial-gradient(circle at 50% 50%, transparent 38%, rgba(255, 255, 255, 0.06) 45%, transparent 55%);
    opacity: 0.26;
    mix-blend-mode: screen;
    filter: blur(1.4px);
    animation: singularity-breath 4.8s ease-in-out infinite;
}
@keyframes singularity-deep {
    0%,
    100% {
        filter: contrast(1.08) brightness(1.02) saturate(1.04);
    }
    50% {
        filter: contrast(1.14) brightness(1.06) saturate(1.1);
    }
}
@keyframes singularity-spin {
    0% {
        transform: rotate(0deg) scale(1.03);
    }
    100% {
        transform: rotate(360deg) scale(1.03);
    }
}
@keyframes singularity-breath {
    0%,
    100% {
        transform: scale(0.96);
        opacity: 0.18;
    }
    50% {
        transform: scale(1.06);
        opacity: 0.3;
    }
}

/* === TIER TEXT EFFECTS === */
.text-tier-0 {
    color: #e5e7eb;
} /* Обычный */

.text-tier-1 {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

.text-tier-2 {
    background: linear-gradient(to right, #fff, #fb923c); /* Белый в Оранжевый */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 5px rgba(255, 107, 53, 0.5));
}

.text-tier-3 {
    background: linear-gradient(to right, #fb923c, #a855f7, #3b82f6); /* Fennec -> Purple -> Blue */
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmerText 3s linear infinite;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.65);
}
.rank-badge-0 {
    opacity: 0.85;
}
.rank-badge-1 {
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.18);
}
.rank-badge-2 {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 107, 53, 0.18));
    border-color: rgba(255, 107, 53, 0.22);
    box-shadow: 0 0 22px rgba(255, 107, 53, 0.25);
}
.rank-badge-3 {
    background: linear-gradient(90deg, rgba(255, 107, 53, 0.25), rgba(168, 85, 247, 0.25), rgba(59, 130, 246, 0.25));
    background-size: 200% 200%;
    animation: rankShimmer 3s linear infinite;
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow:
        0 0 30px rgba(255, 255, 255, 0.22),
        0 0 50px rgba(255, 107, 53, 0.18);
}
@keyframes rankShimmer {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes shimmerText {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* === ПРАВИЛЬНАЯ ЛОГИКА 3D FLIP === */
/* Когда card-object вращается на 180deg:
            - face-front: 180 + 0 = 180deg → скрыта (backface-visibility: hidden)
            - face-back: 180 + 180 = 360deg = 0deg → видна нормально
            Никаких scaleX(-1) не нужно! */

/* === RARITY STYLES (Цвета рамок) === */

/* 0-49: CUB (Grey) - ИСПРАВЛЕНИЕ: Улучшена видимость рамки */
.card-scene:not([data-fennec-lib-root]) .card-object.card-cub,
.card-scene:not([data-fennec-lib-root]) .card-face.card-cub {
    border: 3px solid #52525b !important; /* ИСПРАВЛЕНИЕ: Увеличена толщина, применяется к card-object и card-face */
    box-shadow:
        0 0 25px rgba(82, 82, 91, 0.5),
        inset 0 0 10px rgba(82, 82, 91, 0.2) !important; /* ИСПРАВЛЕНИЕ: Увеличена яркость */
    box-sizing: border-box; /* ИСПРАВЛЕНИЕ: Убеждаемся что рамка не выходит за границы */
}
.card-face.card-cub {
    background: radial-gradient(circle at center, rgba(82, 82, 91, 0.15) 0%, rgba(0, 0, 0, 0.8) 70%);
}
.text-cub {
    color: #a1a1aa;
}

/* 0-49: CUB (Grey) - ИСПРАВЛЕНИЕ: Улучшена видимость рамки */
.card-scene:not([data-fennec-lib-root]) .card-object.card-cub,
.card-scene:not([data-fennec-lib-root]) .card-face.card-cub {
    border: 3px solid #52525b !important; /* ИСПРАВЛЕНИЕ: Увеличена толщина, применяется к card-object и card-face */
    box-shadow:
        0 0 25px rgba(82, 82, 91, 0.5),
        inset 0 0 10px rgba(82, 82, 91, 0.2) !important; /* ИСПРАВЛЕНИЕ: Увеличена яркость */
    box-sizing: border-box; /* ИСПРАВЛЕНИЕ: Убеждаемся что рамка не выходит за границы */
}
.card-face.card-cub {
    background: radial-gradient(circle at center, rgba(82, 82, 91, 0.15) 0%, rgba(0, 0, 0, 0.8) 70%);
}
.text-cub {
    color: #a1a1aa;
}

/* 50-59: SCOUT (Green) - ИСПРАВЛЕНИЕ: Улучшена видимость рамки */
.card-scene:not([data-fennec-lib-root]) .card-object.card-scout,
.card-scene:not([data-fennec-lib-root]) .card-face.card-scout {
    border: 3px solid #22c55e !important; /* ИСПРАВЛЕНИЕ: Увеличена толщина */
    box-shadow:
        0 0 30px rgba(34, 197, 94, 0.6),
        inset 0 0 15px rgba(34, 197, 94, 0.3) !important; /* ИСПРАВЛЕНИЕ: Увеличена яркость */
    box-sizing: border-box; /* ИСПРАВЛЕНИЕ: Убеждаемся что рамка не выходит за границы */
}
.card-face.card-scout {
    background: radial-gradient(circle at center, rgba(34, 197, 94, 0.15) 0%, rgba(0, 0, 0, 0.8) 70%);
}
.text-scout {
    color: #4ade80;
}

/* 60-69: HUNTER (Blue) - ИСПРАВЛЕНИЕ: Улучшена видимость рамки */
.card-scene:not([data-fennec-lib-root]) .card-object.card-hunter,
.card-scene:not([data-fennec-lib-root]) .card-face.card-hunter {
    border: 3px solid #3b82f6 !important; /* ИСПРАВЛЕНИЕ: Увеличена толщина */
    box-shadow:
        0 0 35px rgba(59, 130, 246, 0.7),
        inset 0 0 15px rgba(59, 130, 246, 0.4) !important; /* ИСПРАВЛЕНИЕ: Увеличена яркость */
    box-sizing: border-box; /* ИСПРАВЛЕНИЕ: Убеждаемся что рамка не выходит за границы */
}
.card-face.card-hunter {
    background: radial-gradient(circle at center, rgba(59, 130, 246, 0.15) 0%, rgba(0, 0, 0, 0.8) 70%);
}
.text-hunter {
    color: #60a5fa;
}

/* 70-79: ALPHA (Red) - ИСПРАВЛЕНИЕ: Улучшена видимость рамки */
.card-scene:not([data-fennec-lib-root]) .card-object.card-alpha,
.card-scene:not([data-fennec-lib-root]) .card-face.card-alpha {
    border: 3px solid #ef4444 !important; /* ИСПРАВЛЕНИЕ: Увеличена толщина */
    box-shadow:
        0 0 40px rgba(239, 68, 68, 0.8),
        inset 0 0 20px rgba(239, 68, 68, 0.5) !important; /* ИСПРАВЛЕНИЕ: Увеличена яркость */
    box-sizing: border-box; /* ИСПРАВЛЕНИЕ: Убеждаемся что рамка не выходит за границы */
}
.card-face.card-alpha {
    background: radial-gradient(circle at center, rgba(239, 68, 68, 0.15) 0%, rgba(0, 0, 0, 0.8) 70%);
}
.text-alpha {
    color: #f87171;
}

/* 80-89: ELDER (Gold) - ИСПРАВЛЕНИЕ: Улучшена видимость рамки */
.card-scene:not([data-fennec-lib-root]) .card-object.card-elder,
.card-scene:not([data-fennec-lib-root]) .card-face.card-elder {
    border: 3px solid #eab308 !important; /* ИСПРАВЛЕНИЕ: Увеличена толщина */
    box-shadow:
        0 0 45px rgba(234, 179, 8, 0.9),
        inset 0 0 20px rgba(234, 179, 8, 0.6) !important; /* ИСПРАВЛЕНИЕ: Увеличена яркость */
    box-sizing: border-box; /* ИСПРАВЛЕНИЕ: Убеждаемся что рамка не выходит за границы */
}
.card-face.card-elder {
    background: radial-gradient(circle at center, rgba(234, 179, 8, 0.2) 0%, rgba(0, 0, 0, 0.8) 70%);
}
.text-elder {
    color: #facc15;
}

/* 90-100: SPIRIT (TRUE RAINBOW / HOLOGRAPHIC) - ВСЕ ЦВЕТА ОДНОВРЕМЕННО */
.card-scene:not([data-fennec-lib-root]) .card-spirit {
    position: relative;
    border-radius: 24px;
    /* Скругленная радужная рамка через псевдоэлемент */
}

.card-scene:not([data-fennec-lib-root]) .card-spirit {
    overflow: visible;
    position: relative;
}

.card-scene:not([data-fennec-lib-root]) .card-spirit::before {
    content: '';
    position: absolute;
    inset: 0; /* ИСПРАВЛЕНИЕ: Увеличена толщина рамки для лучшей видимости */
    border-radius: 24px; /* ИСПРАВЛЕНИЕ: Скругленные края рамки */
    padding: 4px; /* ИСПРАВЛЕНИЕ: Увеличена толщина */
    background: conic-gradient(
        from 0deg,
        #ff0000,
        #ff7f00,
        #ffff00,
        #00ff00,
        #00ffff,
        #0000ff,
        #4b0082,
        #9400d3,
        #ff0000
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: 60;
    pointer-events: none;
    filter: brightness(1.55) saturate(1.25) drop-shadow(0 0 16px rgba(255, 255, 255, 0.35));
    transform-origin: center center;
    animation: spiritBorderPulse 4.2s linear infinite;
    /* ИСПРАВЛЕНИЕ: Убеждаемся что рамка видна */
    overflow: visible;
}

.badge-medal {
    transition:
        transform 160ms ease,
        filter 160ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    overflow: hidden;
    outline: none;
    transform: translateZ(0);
    will-change: transform, filter;
}
.badge-medal:hover {
    transform: translateY(-2px) scale(1.06);
    filter: drop-shadow(0 0 12px rgba(255, 107, 53, 0.35)) drop-shadow(0 0 22px rgba(255, 255, 255, 0.12));
}

.badge-medal img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

@keyframes spiritBorderPulse {
    0% {
        filter: brightness(1.65) saturate(1.25) hue-rotate(0deg) drop-shadow(0 0 16px rgba(255, 255, 255, 0.35));
    }
    50% {
        filter: brightness(2.05) saturate(1.45) hue-rotate(180deg) drop-shadow(0 0 20px rgba(255, 255, 255, 0.45));
    }
    100% {
        filter: brightness(1.65) saturate(1.25) hue-rotate(360deg) drop-shadow(0 0 16px rgba(255, 255, 255, 0.35));
    }
}

.card-scene:not([data-fennec-lib-root]) .card-spirit .card-face {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 24px; /* ИСПРАВЛЕНИЕ: Закругленные края у фона */
    box-shadow:
        0 0 20px rgba(255, 0, 0, 0.5),
        0 0 30px rgba(255, 127, 0, 0.4),
        0 0 40px rgba(255, 255, 0, 0.3),
        0 0 50px rgba(0, 255, 0, 0.3),
        0 0 40px rgba(0, 255, 255, 0.3),
        0 0 30px rgba(0, 0, 255, 0.4),
        0 0 20px rgba(75, 0, 130, 0.5),
        0 0 10px rgba(148, 0, 211, 0.6);
    /* ИСПРАВЛЕНИЕ: Убеждаемся что рамка не обрезается */
    margin: 0;
}

/* Радужный текст для слова "SPIRIT" */
.text-spirit {
    background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    animation: rainbowTextMove 3s linear infinite;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

@keyframes rainbowTextMove {
    to {
        background-position: 200% center;
    }
}

/* Совместимость со старыми классами */
.card-common {
    border-color: #52525b;
    box-shadow: 0 0 15px rgba(82, 82, 91, 0.1);
}
.card-uncommon {
    border-color: #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
}
.card-rare {
    border-color: #3b82f6;
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.3);
}
.card-epic {
    border-color: #ef4444;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
}
.card-legendary {
    border-color: #eab308;
    box-shadow: 0 0 35px rgba(234, 179, 8, 0.5);
}
.card-mythic {
    animation: rainbowGlow 4s linear infinite alternate;
    background: #000;
}

/* 3D эффект для карточки */
.fennec-card-wrapper {
    perspective: 1000px;
    perspective-origin: center center;
}

#fennecCard {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
    will-change: transform;
}

#fennecCard:hover {
    transform: rotateY(8deg) rotateX(-3deg) scale(1.03) translateZ(20px);
}

@media (prefers-reduced-motion: no-preference) {
    #fennecCard {
        animation: cardFloat 6s ease-in-out infinite;
    }
}

@keyframes cardFloat {
    0%,
    100% {
        transform: translateY(0px) rotateY(0deg) rotateX(0deg);
    }
    50% {
        transform: translateY(-8px) rotateY(2deg) rotateX(1deg);
    }
}

@keyframes mythicPulse {
    0% {
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
        border-color: #ef4444;
    }
    50% {
        box-shadow:
            0 0 60px rgba(239, 68, 68, 0.8),
            0 0 10px rgba(255, 255, 255, 0.5);
        border-color: #ff8888;
    }
    100% {
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
        border-color: #ef4444;
    }
}

.holo-overlay {
    background: linear-gradient(
        125deg,
        transparent 30%,
        rgba(255, 255, 255, 0.1) 40%,
        rgba(255, 255, 255, 0.1) 60%,
        transparent 70%
    );
    background-size: 200% 200%;
    animation: holoShift 5s linear infinite;
}
@keyframes holoShift {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes cardHoloSheen {
    0% {
        background-position: -80% 50%;
    }
    100% {
        background-position: 180% 50%;
    }
}

.card-holo-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 26;
    display: none;
    opacity: 0.35;
    mix-blend-mode: overlay;
    border-radius: 24px;
    clip-path: inset(0 round 24px);
    background-image:
        linear-gradient(115deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0.22) 35%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(90deg, rgba(255, 107, 53, 0.1), rgba(168, 85, 247, 0.1), rgba(59, 130, 246, 0.1));
    background-size:
        240% 140%,
        200% 100%;
    background-position:
        -80% 50%,
        0% 50%;
    animation: cardHoloSheen 4.5s linear infinite;
}

/* ===== FENNEC SPIRIT EFFECT ===== */
@keyframes spiritGlow {
    0% {
        box-shadow:
            0 0 10px #ff6b35,
            inset 0 0 10px #ff6b35;
        border-color: #ff6b35;
    }
    50% {
        box-shadow:
            0 0 25px #ff6b35,
            0 0 10px #ff9e75,
            inset 0 0 20px #ff6b35;
        border-color: #ff9e75;
    }
    100% {
        box-shadow:
            0 0 10px #ff6b35,
            inset 0 0 10px #ff6b35;
        border-color: #ff6b35;
    }
}

/* === FENNEC SOUL PULSE (Универсальный эффект) === */

@keyframes soulBreath {
    0% {
        /* Обычная тень - УМЕРЕННО */
        box-shadow:
            0 0 15px rgba(255, 107, 53, 0.4),
            0 0 25px rgba(255, 107, 53, 0.3);
    }
    50% {
        /* Яркая оранжевая аура - УМЕРЕННО */
        box-shadow:
            0 0 30px rgba(255, 107, 53, 0.7),
            0 0 50px rgba(255, 107, 53, 0.5),
            0 0 70px rgba(255, 107, 53, 0.3);
    }
    100% {
        box-shadow:
            0 0 15px rgba(255, 107, 53, 0.4),
            0 0 25px rgba(255, 107, 53, 0.3);
    }
}

/* Класс, который мы добавим карточке холдера */
.fennec-pulse {
    animation: soulBreath 2s infinite ease-in-out !important;
    position: relative;
    z-index: 10; /* Чтобы свечение было видно */
}

/* Чтобы рамка редкости оставалась видна, мы не трогаем border-color в анимации */

/* Значок SOUL */
.soul-badge {
    background: linear-gradient(90deg, #ff6b35, #ff4e00);
    color: white;
    font-weight: 800;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.digging-fox {
    animation: digShake 0.2s infinite;
    display: inline-block;
}
.dirt-particle {
    position: fixed;
    width: 6px;
    height: 6px;
    background: #d97706;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
}

/* ===== WHALE WATCHER ===== */
.whale-alert {
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.notification.exit {
    animation: slideOut 0.3s ease-out forwards;
}
@keyframes slideOut {
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* ===== FENNEC CHAT STYLES ===== */
/* Scrollbar for Chat */
#chatMessages::-webkit-scrollbar {
    width: 4px;
}
#chatMessages::-webkit-scrollbar-track {
    background: transparent;
}
#chatMessages::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}

/* Markdown-like styling for AI response */
.oracle-md a {
    color: #ff6b35;
    text-decoration: underline;
}
.oracle-md strong {
    color: #fff;
    font-weight: 700;
}
.oracle-md ul {
    list-style-type: disc;
    padding-left: 15px;
    margin-top: 5px;
}

@keyframes pulse-glow {
    0%,
    100% {
        filter: drop-shadow(0 0 5px #ff6b35);
    }
    50% {
        filter: drop-shadow(0 0 15px #ff6b35) brightness(1.2);
    }
}

.ai-avatar {
    animation: pulse-glow 3s infinite ease-in-out;
}

/* Animation for messages */
@keyframes msgSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.msg-anim {
    animation: msgSlide 0.3s ease-out forwards;
}

/* AI HIGHLIGHT EFFECT */
@keyframes pulse-guide {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7);
        border-color: #ff6b35;
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 107, 53, 0);
        border-color: #ff6b35;
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
        border-color: rgba(255, 255, 255, 0.1);
    }
}

@keyframes loading-bar {
    0% {
        transform: translateX(-100%);
    }
    50% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%);
    }
}
.ai-highlight {
    animation: pulse-guide 1.5s infinite;
    z-index: 100;
    position: relative;
}

@keyframes swap-success-pulse {
    0% {
        transform: translateZ(0) scale(1);
        box-shadow: 0 0 0 rgba(255, 107, 53, 0);
    }
    35% {
        transform: translateZ(0) scale(1.01);
        box-shadow: 0 0 38px rgba(255, 107, 53, 0.38);
    }
    100% {
        transform: translateZ(0) scale(1);
        box-shadow: 0 0 0 rgba(255, 107, 53, 0);
    }
}
.swap-success-pulse {
    animation: swap-success-pulse 700ms ease-out;
}

@keyframes swap-success-overlay {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }
    22% {
        opacity: 1;
        transform: scale(1);
    }
    78% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.01);
    }
}
.swap-success-overlay {
    animation: swap-success-overlay 950ms ease-out forwards;
}

.card-glare {
    display: none !important;
    opacity: 0 !important;
}

.router-view {
    opacity: 1;
    transition: opacity 180ms ease;
}

.router-view.router-fade-out {
    opacity: 0;
}

/* Lite Mode Optimizations for Mobile/Weak PC */
.fennec-lite * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.fennec-lite .glass-panel,
.fennec-lite [style*='backdrop-filter'] {
    background: rgba(10, 10, 15, 0.95) !important;
    backdrop-filter: none !important;
}

.fennec-lite .animate-pulse {
    animation-duration: 3s !important;
}

.fennec-lite [style*='box-shadow'] {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important;
}

.fennec-lite [style*='filter: drop-shadow'] {
    filter: none !important;
}

.fennec-lite [style*='linear-gradient'] {
    background: rgba(255, 107, 53, 0.15) !important;
}

/* ═══ ISLAND ROADMAP ═══ */
@keyframes islandBob {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}
@keyframes islandFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}
@keyframes oceanWave1 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
@keyframes oceanWave2 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(50%);
    }
}
@keyframes shipSail {
    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }
    50% {
        transform: translateY(-3px) rotate(2deg);
    }
}
@keyframes pathDash {
    to {
        stroke-dashoffset: -24;
    }
}
@keyframes beaconPulse {
    0%,
    100% {
        box-shadow:
            0 0 20px rgba(255, 107, 53, 0.3),
            0 0 40px rgba(255, 107, 53, 0.15);
    }
    50% {
        box-shadow:
            0 0 30px rgba(255, 107, 53, 0.5),
            0 0 60px rgba(255, 107, 53, 0.25);
    }
}
@keyframes fogDrift {
    0%,
    100% {
        opacity: 0.4;
        transform: translateX(0);
    }
    50% {
        opacity: 0.6;
        transform: translateX(8px);
    }
}
@keyframes starTwinkle {
    0%,
    100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}
.island-node {
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s;
}
.island-node:hover {
    transform: translateY(-8px) scale(1.04) !important;
}

/* ═══ TERMINAL 3-COLUMN LAYOUT ═══ */

/* Pair sidebar item */
.pair-sidebar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 6px;
    border-radius: 6px;
    cursor: pointer;
    transition:
        background 0.15s,
        border-color 0.15s;
    border: 1px solid transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pair-sidebar-item:last-child {
    border-bottom-color: transparent;
}

/* Thin sidebar scrollbar */
#pair-list-sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 107, 53, 0.35) transparent;
}
#pair-list-sidebar::-webkit-scrollbar {
    width: 3px;
}
#pair-list-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
#pair-list-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 53, 0.35);
    border-radius: 3px;
}
.pair-sidebar-item:hover {
    background: rgba(255, 107, 53, 0.06);
    border-color: rgba(255, 107, 53, 0.15);
}
.pair-sidebar-item.active {
    background: rgba(255, 107, 53, 0.1);
    border-color: rgba(255, 107, 53, 0.3);
}

/* Sort button active */
.pair-sort-btn.active {
    color: #f97316;
    border-color: rgba(249, 115, 22, 0.4);
    background: rgba(249, 115, 22, 0.08);
}

/* Graduated badge */
.pair-grad-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    font-weight: 700;
    white-space: nowrap;
}

/* BRC20 token custom dropdown buttons */
#dep-brc20-select,
#wd-brc20-select {
    background: rgba(0, 0, 0, 0.4);
    color: #9ca3af;
    font-size: 12px;
    padding: 8px 4px;
    outline: none;
}
/* BRC20 custom dropdown list */
.brc20-dropdown-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(18, 12, 8, 0.97);
    border: 1px solid rgba(249, 115, 22, 0.25);
    border-radius: 10px;
    padding: 4px;
    max-height: 160px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(249, 115, 22, 0.3) transparent;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.brc20-dropdown-list::-webkit-scrollbar {
    width: 4px;
}
.brc20-dropdown-list::-webkit-scrollbar-track {
    background: transparent;
}
.brc20-dropdown-list::-webkit-scrollbar-thumb {
    background: rgba(249, 115, 22, 0.3);
    border-radius: 4px;
}
.brc20-dropdown-list .brc20-dd-item {
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #e5e7eb;
    cursor: pointer;
    border-radius: 6px;
    text-align: center;
    transition: background 0.15s;
}
.brc20-dropdown-list .brc20-dd-item:hover {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

/* Mobile: show pair-selector-wrap as clickable, hide sidebar */
@media (max-width: 1023px) {
    #pair-sidebar {
        display: none !important;
    }
    #pair-selector-wrap {
        cursor: pointer;
    }
}

/* Mobile site chrome: keep the wallet action inside the viewport and make the
   hamburger drawer behave like a real modal navigation surface. */
@media (max-width: 767px) {
    header > .max-w-6xl {
        grid-template-columns: auto 40px minmax(0, 1fr) !important;
        gap: 4px;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    header > .max-w-6xl > a:first-child {
        min-width: 36px;
        gap: 0 !important;
    }

    header > .max-w-6xl > a:first-child > div {
        display: none;
    }

    header > .max-w-6xl > div.justify-self-end {
        min-width: 0;
        gap: 4px !important;
    }

    header > .max-w-6xl > div.justify-self-end > a[aria-label='Twitter'],
    header > .max-w-6xl > div.justify-self-end > a[aria-label='Telegram'],
    header > .max-w-6xl > div.justify-self-end > a[href*='x.com'],
    header > .max-w-6xl > div.justify-self-end > a[href*='t.me'] {
        display: none !important;
    }

    #langSwitchBtn {
        width: 36px !important;
        height: 40px !important;
    }

    #connectBtn {
        width: 44px !important;
        height: 40px !important;
        padding: 0 !important;
        justify-content: center;
        flex: 0 0 44px;
    }

    #connectBtn > span {
        display: none;
    }

    #walletBtn {
        width: 44px !important;
        height: 40px !important;
        padding: 0 !important;
        font-size: 0 !important;
        flex: 0 0 44px;
    }

    #walletBtn > i {
        margin: 0 !important;
        font-size: 14px;
    }

    #mobileMenuBtn {
        width: 44px !important;
        height: 44px !important;
        color: #f0e7db;
    }

    #mobileMenu {
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
        animation: mobileMenuIn 160ms ease-out;
    }

    #mobileMenu nav a {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.mobile-menu-open {
        overflow: hidden !important;
        touch-action: none;
    }
}

@keyframes mobileMenuIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    #mobileMenu { animation: none; }
}

/* Desktop: hide mobile dropdown trigger */
@media (min-width: 1024px) {
    #pair-selector-wrap {
        cursor: default;
    }

    /* Range slider for launchpad */
    #tp-trade-slider::-webkit-slider-thumb {
        appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #f97316;
        cursor: pointer;
    }
    #tp-trade-slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #f97316;
        border: none;
        cursor: pointer;
    }
}

/* Range slider styling (launchpad) */
#tp-trade-slider::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f97316;
    cursor: pointer;
}
#tp-trade-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f97316;
    border: none;
    cursor: pointer;
}

/* ─── LAUNCHPAD STYLES (shared so SPA router can use them) ─── */
.lp-glass {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-card {
    transition: all 0.25s ease;
    cursor: pointer;
}
.lp-card:hover {
    border-color: rgba(255, 107, 53, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(255, 107, 53, 0.08);
}
.lp-gradient-bar {
    background: linear-gradient(90deg, #ff6b35, #ff8c42, #ffad60);
}
.lp-glow {
    box-shadow: 0 0 40px rgba(255, 107, 53, 0.15);
}
.lp-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.lp-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.lp-modal-overlay.open .lp-modal-box {
    transform: scale(1) translateY(0);
    opacity: 1;
}
.lp-modal-box {
    max-width: 480px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 20px;
    transform: scale(0.95) translateY(20px);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lpPulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}
.lp-pulse {
    animation: lpPulse 2s ease-in-out infinite;
}
@keyframes lpShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}
.lp-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.03) 25%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.03) 75%
    );
    background-size: 200% 100%;
    animation: lpShimmer 1.5s infinite;
    border-radius: 8px;
}
@keyframes lpCheckmark {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
.lp-checkmark {
    animation: lpCheckmark 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.lp-status-active {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    border-color: rgba(74, 222, 128, 0.2);
}
.lp-status-graduating {
    color: #facc15;
    background: rgba(250, 204, 21, 0.1);
    border-color: rgba(250, 204, 21, 0.2);
}
.lp-status-graduated {
    color: #ff6b35;
    background: rgba(255, 107, 53, 0.1);
    border-color: rgba(255, 107, 53, 0.2);
}
.nav-link.lp-active {
    color: #ff6b35 !important;
    border-bottom: 2px solid #ff6b35;
}
.tp-tab-active {
    color: #ff6b35 !important;
    border-bottom-color: #ff6b35 !important;
}
.tp-range-active {
    color: #ff6b35 !important;
    border-color: rgba(255, 107, 53, 0.3) !important;
    background: rgba(255, 107, 53, 0.08);
}
#tp-chart-canvas {
    width: 100% !important;
    height: 100% !important;
}
@media (max-width: 1023px) {
    #tp-main-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══ Terminal 3-column grid ═══ */
@media (min-width: 1024px) {
    #trading-panel {
        min-height: 480px;
    }
}

@media (min-width: 1024px) {
    #terminal-grid {
        display: grid !important;
        grid-template-columns: 190px 1fr 340px !important;
        gap: 12px !important;
        align-items: start !important;
        flex-direction: unset !important;
    }
}
@media (max-width: 767px) {
    body {
        overflow-x: hidden;
    }
    #sec-home {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

@media (max-width: 760px) {
    html,
    body,
    #sec-home {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* Generated Vision art and emoji replacement polish. */
#sec-home .hero-fox-bg {
    display: block !important;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 107, 53, 0.14), transparent 32%),
        radial-gradient(circle at 74% 26%, rgba(56, 189, 248, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(8, 4, 3, 0.12), rgba(8, 4, 3, 0.66) 68%, rgba(8, 4, 3, 0.94)),
        linear-gradient(90deg, rgba(4, 3, 3, 0.9), rgba(4, 3, 3, 0.52) 52%, rgba(4, 3, 3, 0.82)) !important;
    opacity: 1 !important;
    filter: none;
}

#sec-home .hero-fox-bg::after {
    background:
        radial-gradient(circle at 14% 24%, rgba(255, 107, 53, 0.08), transparent 28%),
        linear-gradient(90deg, rgba(8, 4, 3, 0.82), rgba(8, 4, 3, 0.38) 52%, rgba(8, 4, 3, 0.78)) !important;
}

.fennec-inline-token {
    display: inline-block;
    width: 12px;
    height: 12px;
    object-fit: contain;
    vertical-align: -1px;
    filter: drop-shadow(0 0 3px rgba(255, 107, 53, 0.3));
}

.fennec-ui-icon {
    display: inline-block;
    width: 13px;
    height: 13px;
    object-fit: contain;
    flex: 0 0 auto;
    vertical-align: -2px;
    filter: drop-shadow(0 0 4px rgba(255, 107, 53, 0.28));
}

#liveTicker .ticker-item img.fennec-ui-icon {
    width: 13px;
    height: 13px;
}

#liveTicker .ticker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: currentColor;
}

#liveTicker .ticker-icon i {
    font-size: 12px;
    line-height: 1;
}

.launch-status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex: 0 0 auto;
    box-shadow: 0 0 10px currentColor;
}

.launch-status-dot.is-active { color: #22c55e; background: #22c55e; }
.launch-status-dot.is-graduating { color: #eab308; background: #eab308; }
.launch-status-dot.is-graduated { color: #f97316; background: #f97316; }
.launch-status-dot.is-failed { color: #ef4444; background: #ef4444; }
.launch-status-dot.is-muted { color: #94a3b8; background: #94a3b8; opacity: 0.6; }

.launch-status-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 0 4px rgba(255, 107, 53, 0.28));
}

.launch-status-icon.is-active { background-image: url('../img/generated/icons/cutout/check.png'); }
.launch-status-icon.is-graduating { background-image: url('../img/generated/icons/cutout/rocket.png'); }
.launch-status-icon.is-graduated { background-image: url('../img/generated/icons/cutout/rocket.png'); }
.launch-status-icon.is-failed { background-image: url('../img/generated/icons/cutout/warning.png'); }
.launch-status-icon.is-muted { background-image: url('../img/generated/icons/cutout/target.png'); opacity: 0.55; }

.pair-grad-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    vertical-align: 1px;
}

.pair-grad-badge img {
    width: 11px;
    height: 11px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(255, 107, 53, 0.26));
}

.fennec-ui-icon-button,
.fennec-ui-icon-text {
    display: inline-block;
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(255, 107, 53, 0.22));
}

.fennec-ui-icon-panel {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    object-fit: contain;
    filter: drop-shadow(0 0 7px rgba(255, 107, 53, 0.28));
}

.fennec-ui-icon-on-warm {
    filter: brightness(0) saturate(100%) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.26)) !important;
}

.fennec-ui-icon-empty {
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 auto 10px;
    opacity: 0.5;
    object-fit: contain;
}

.fennec-modal-icon {
    display: block;
    width: 34px;
    height: 34px;
    margin: 0 auto 14px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(255, 107, 53, 0.32));
}

.fennec-portfolio-avatar-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.26));
}

.fennec-score-icon {
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto 5px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(255, 107, 53, 0.24));
}

.lp-glass div:has(> img.fennec-ui-icon-panel),
.tk-glass div:has(> img.fennec-ui-icon-panel),
.lp-glass div:has(> img.fennec-ui-icon-empty) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.fennec-cutout-note {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    vertical-align: -2px;
    object-fit: contain;
    filter: drop-shadow(0 0 4px rgba(255, 107, 53, 0.24));
}

@media (max-width: 760px) {
    #sec-home .hero-fox-bg {
        opacity: 1 !important;
    }

    #sec-audit.page-section {
        padding-top: 176px !important;
    }
}

@media (max-width: 767px) {
    /* header/menu offsets (G1) */
    #mobileMenu { top: 56px; }
    .page-section { padding-top: 84px !important; }
    #sec-audit.page-section { padding-top: 84px !important; }
    #connectBtn { min-height: 40px; }
    #mobileMenuBtn { min-width: 44px; min-height: 44px; }
    header a[href*='twitter'], header a[href*='telegram'] { display: none; }

    /* 44px touch targets (G3) */
    #chart-1h, #chart-24h, #chart-7d, #chart-30d, #chart-all,
    #tab-swaps, #tab-holders, #tab-lp,
    #shFirst, #shPrev, #shNext, #shLast,
    .pair-sort-btn, .mobile-sort-btn,
    .lp-filter-btn, #launch-refresh-btn, .launch-grad-preset,
    .tp-pct-btn, #tp-buy-tab, #tp-sell-tab,
    #tp-tab-trades, #tp-tab-holders, #tp-tab-about, #tp-tab-chat,
    #tp-chart-int-1m, #tp-chart-int-5m, #tp-chart-int-1h, #tp-chart-int-1d,
    .pf-range-btn, #portfolioCopyAddr, #portfolioExplorerLink,
    #liqTabAdd, #liqTabRemove,
    button[onclick^="window.__swapQuickAmt"],
    button[onclick^="window.__launchSetPct"],
    button[onclick^="window.setSlippage"],
    button[onclick^="window.__launchPagePrev"],
    button[onclick^="window.__launchPageNext"],
    button[onclick^="window.__openTokenPicker"],
    button[onclick^="setMaxLiqAmount"], #max-amount-btn, #tp-trade-max, #refreshBalBtn {
        min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
    }
    #switch-dir-btn { width: 36px; height: 36px; font-size: 13px; }
    #slippageSettingsBtn { padding: 10px; margin: -10px; }

    /* minimum readable font (G3) */
    .text-\[8px\] { font-size: 10px !important; }
    .text-\[9px\] { font-size: 10px !important; }

    /* iOS input anti-zoom (G4) */
    #pair-search, #pair-search-sidebar, #mobile-pair-search,
    #tokenPickerSearch, #launch-search,
    #launch-ticker, #launch-name, #launch-desc,
    #launch-twitter, #launch-website, #launch-telegram,
    #launch-grad-fb, #slippageCustomInput,
    #tp-trade-input, #portfolioRefAliasInput { font-size: 16px !important; }

    /* footer (G5) */
    #siteFooter > div { font-size: 12px !important; gap: 8px 20px !important; }
    #siteFooter a { padding: 8px 2px; display: inline-block; }

    /* terminal: market stats 5→3 cols */
    #chart-panel .grid.grid-cols-5 { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 12px; }
    /* terminal: refresh button icon-only */
    #refreshBtn span#refreshText { display: none; }
    /* terminal: mobile pairs list safe area */
    #mobile-pair-list { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }

    /* launch: mobile cards vs table toggle — !important so these beat the base
       .lp-cards-wrap{display:none} rule below (which comes later in source order;
       media queries add no specificity, so without !important the base would win). */
    .lp-table-wrap { display: none !important; }
    .lp-cards-wrap { display: block !important; }
    /* launch: create modal fits screen */
    .lp-modal-box { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
    /* launch: token detail — trade panel above chart */
    #tp-main-grid { display: flex !important; flex-direction: column; }
    #tp-main-grid > div:nth-child(2) { order: -1; }
    /* launch: hero CTA row wrap */
    #lp-main-content .flex.gap-3.mt-5 { flex-wrap: wrap; }

    /* portfolio */
    #portfolioTotalValue { font-size: 28px; }
    #pfNetworthSpark { display: none !important; }
    #portfolioAddrRow { flex-wrap: wrap; }
    #portfolioFullAddr { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

    /* tokenomics: card padding (only the p-6 cards, not the flush table) */
    .tk-glass.p-6 { padding: 16px !important; }
}

/* launch: mobile card base (outside media query, hidden by default) */
.lp-cards-wrap { display: none; }
.lp-mcard { padding: 12px; border-bottom: 1px solid rgba(255,255,255,.05); cursor: pointer; }
.lp-mcard:active { background: rgba(255,255,255,.03); }

@media (max-width: 1023px) {
    /* terminal: swap panel (right column) above the fold */
    #terminal-grid > div:nth-child(3) { order: -1; }
}
/* Shared site-header breakpoint contract.
   Tailwind's generated bundle does not guarantee every responsive display utility is
   present, so the 768-1023 tablet range and the 1024 desktop handoff live here. */
.fennec-desktop-nav,
.fennec-desktop-control {
    display: none !important;
}

.fennec-mobile-menu-btn {
    display: flex !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
}

.fennec-mobile-menu {
    display: none !important;
}

.earn-site-header-grid {
    grid-template-columns: minmax(44px, 1fr) 44px minmax(44px, 1fr);
}

.earn-site-header-grid > a {
    justify-self: start;
}

.earn-site-header-grid #connectBtn {
    min-width: 44px;
    min-height: 40px;
    justify-content: center;
}

#sec-portfolio[data-fennec-surface='earn'] {
    padding-top: 5.25rem !important;
}

.earn-hero-layout,
.earn-hero-copy,
.earn-state-column,
.earn-benefits,
.earn-dashboard,
.earn-dashboard-main,
.earn-dashboard-side,
.earn-balance-block,
.earn-primary-metric,
.earn-breakdown,
.earn-breakdown-row,
.earn-breakdown-item {
    min-width: 0;
}

/* The Earn components that declare their own `display` are covered by the project-wide
 * `.hidden` contract at the top of this file — no per-component guard list needed. */

.earn-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.earn-hero-copy {
    max-width: 680px;
}

/*
 * LAYOUT FOLLOWS STATE. The marketing column is onboarding copy for a visitor who has
 * not connected yet. A connected wallet has already done Connect / Verify / Share, so
 * the page collapses to a single full-width workspace — nothing left to mismatch, and
 * the reclaimed width goes to the metrics, the link and the activity list.
 * `data-earn-layout` is written only by syncReferralEarnLayoutMode() in referral_ui.js.
 */
#sec-portfolio[data-earn-layout='connected'] .earn-hero-copy,
#sec-portfolio[data-earn-layout='connected'] .earn-benefits {
    display: none !important;
}

#sec-portfolio[data-earn-layout='connected'] .earn-hero-layout {
    grid-template-areas: 'state' !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    row-gap: 0;
    /* `.page-section.active` is `display:flex !important`, so the single remaining
       child would otherwise shrink-to-fit instead of using the reclaimed width. */
    flex: 1 1 100%;
    width: 100%;
}

#sec-portfolio[data-earn-layout='connected'] .earn-state-column {
    min-height: 0;
}

.earn-eyebrow,
.earn-trust-row,
.earn-card-topline,
.earn-wallet-row,
.earn-workspace-heading,
.earn-verified-strip {
    display: flex;
    align-items: center;
}

.earn-eyebrow {
    gap: 9px;
    margin-bottom: 12px;
    color: #ff8a50;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
}

.earn-review-chip,
.earn-state-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    border: 1px solid rgba(255, 126, 63, 0.24);
    border-radius: 999px;
    background: rgba(255, 107, 53, 0.08);
    color: #ffad82;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.earn-review-chip {
    padding: 6px 8px;
    color: #ffd0ba;
    letter-spacing: 0.04em;
}

.earn-title {
    max-width: 660px;
    color: #fff;
    font-family: var(--font-display, inherit);
    font-size: clamp(2.35rem, 8vw, 4.4rem);
    font-weight: 900;
    letter-spacing: -0.055em;
    line-height: 0.96;
}

.earn-title span {
    color: #ff6b35;
    text-shadow: 0 0 34px rgba(255, 107, 53, 0.18);
}

.earn-lead {
    max-width: 570px;
    margin-top: 16px;
    color: #a9a29e;
    font-size: clamp(0.85rem, 2vw, 1rem);
    line-height: 1.55;
}

.earn-trust-row {
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 14px;
    color: #807874;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.earn-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.earn-trust-row i {
    color: #ff7b43;
}

.earn-state-column {
    width: 100%;
    min-height: 222px;
}

.earn-connect-card,
.earn-workspace-card {
    border-color: rgba(255, 126, 63, 0.15);
    background:
        radial-gradient(circle at 92% 4%, rgba(255, 107, 53, 0.13), transparent 35%),
        linear-gradient(150deg, rgba(31, 20, 15, 0.94), rgba(13, 9, 7, 0.94));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24);
}

.earn-connect-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 222px;
    padding: 18px;
}

.referral-supported-only,
.referral-unsupported-only {
    display: none !important;
}

html[data-referral-runtime='supported'] .referral-supported-only:not(.hidden),
html[data-referral-runtime='unsupported'] .referral-unsupported-only:not(.hidden) {
    display: flex !important;
}

.earn-connect-inner {
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
}

.earn-card-topline {
    justify-content: space-between;
    color: #ff7b43;
    font-size: 15px;
}

.earn-state-badge {
    min-height: 25px;
    padding: 7px 9px;
}

.earn-status-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #ff7b43;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.1), 0 0 12px rgba(255, 107, 53, 0.5);
}

.earn-card-title {
    margin-top: 13px;
    color: #fff;
    font-size: clamp(1.15rem, 3vw, 1.45rem);
    font-weight: 850;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.earn-card-copy {
    margin-top: 7px;
    color: #918986;
    font-size: 12px;
    line-height: 1.5;
}

.earn-primary-action,
.earn-secondary-action,
.earn-secondary-link,
.earn-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-decoration: none;
    transition: filter 160ms ease, transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.earn-primary-action {
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    padding: 10px 14px;
    color: #100905;
    font-size: 11px;
    box-shadow: 0 12px 30px rgba(255, 92, 28, 0.14);
}

.earn-primary-action:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.earn-primary-action:disabled {
    cursor: not-allowed;
    filter: saturate(0.45);
}

.earn-primary-action:focus-visible,
.earn-secondary-action:focus-visible,
.earn-secondary-link:focus-visible,
.earn-icon-button:focus-visible,
.earn-activity-tabs button:focus-visible,
#portfolioRefSection:focus-visible {
    outline: 2px solid rgba(255, 139, 83, 0.95);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(255, 107, 53, 0.15);
}

.earn-privacy-note {
    margin-top: 7px;
    color: #615b58;
    font-size: 9px;
    line-height: 1.3;
    text-align: center;
}

.earn-wallet-row {
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(8, 6, 5, 0.68);
}

.earn-wallet-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
    color: #77706c;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.earn-secondary-link {
    min-height: 40px;
    flex-shrink: 0;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 126, 63, 0.15);
    color: #ff9562;
    font-size: 9px;
}

.earn-secondary-link:hover {
    border-color: rgba(255, 126, 63, 0.38);
    background: rgba(255, 107, 53, 0.07);
}

.earn-workspace-card {
    min-height: 282px;
    padding: 17px;
}

.earn-workspace-heading {
    justify-content: space-between;
    gap: 12px;
}

.earn-workspace-kicker,
.earn-card-label {
    color: #766e6a;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.earn-workspace-title {
    margin-top: 5px;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.earn-inline-notice {
    margin-top: 12px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 126, 63, 0.18);
    border-radius: 10px;
    background: rgba(255, 107, 53, 0.07);
    color: #e6ad91;
    font-size: 10px;
    line-height: 1.45;
}

.earn-verification-state {
    min-height: 202px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 18px;
}

.earn-verification-copy {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.earn-verification-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 126, 63, 0.2);
    border-radius: 12px;
    background: rgba(255, 107, 53, 0.08);
    color: #ff824a;
}

.earn-verification-copy h3 {
    color: #fff;
    font-size: 13px;
    font-weight: 850;
}

.earn-verification-copy p {
    margin-top: 3px;
    color: #8e8783;
    font-size: 10px;
    line-height: 1.45;
}

.earn-progress-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 20px;
}

.earn-progress-steps li {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: #5e5854;
}

.earn-progress-steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 11px;
    right: -7px;
    width: 8px;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.earn-progress-steps li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 9px;
    font-weight: 850;
}

.earn-progress-steps strong,
.earn-progress-steps small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.earn-progress-steps strong {
    color: #817a76;
    font-size: 9px;
    line-height: 1.1;
}

.earn-progress-steps small {
    margin-top: 2px;
    color: #57514e;
    font-size: 8px;
    line-height: 1.1;
}

.earn-progress-steps li.is-complete > span {
    border-color: rgba(79, 209, 142, 0.3);
    background: rgba(79, 209, 142, 0.1);
    color: #68dba0;
}

.earn-progress-steps li.is-complete strong {
    color: #96ad9f;
}

.earn-progress-steps li.is-active > span {
    border-color: rgba(255, 126, 63, 0.55);
    background: rgba(255, 107, 53, 0.13);
    color: #ff9a69;
    box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.06);
}

.earn-progress-steps li.is-active strong {
    color: #ffd0ba;
}

.earn-progress-steps li.is-blocked > span {
    border-color: rgba(255, 126, 63, 0.24);
    background: rgba(255, 107, 53, 0.06);
    color: #b98a74;
}

.earn-progress-steps li.is-blocked strong {
    color: #b09a90;
}

.earn-retry-action {
    margin-top: 18px;
}

.earn-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    margin-top: 15px;
    align-items: start;
}

.earn-dashboard-main,
.earn-dashboard-side {
    display: grid;
    /* Explicit 1fr track: an implicit `auto` column is max-content sized and would let
       the link card push the workspace past a 375px viewport. */
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 11px;
}

/*
 * The state notice ("Link prepared. Referral rewards are not active yet.") explains why
 * every number reads zero — it is the most important line on the panel, not a footnote.
 */
.earn-status-banner {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 176, 66, 0.24);
    border-radius: 12px;
    background: rgba(255, 165, 60, 0.08);
    color: #ffce9d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.earn-status-banner::before {
    content: '\f0eb';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: rgba(255, 165, 60, 0.14);
    color: #ffb44f;
    font-family: 'Font Awesome 6 Free';
    font-size: 11px;
    font-weight: 900;
}

.earn-status-banner:empty {
    display: none;
}

.earn-status-banner.is-active {
    border-color: rgba(79, 209, 142, 0.26);
    background: rgba(79, 209, 142, 0.08);
    color: #9fe6c2;
}

.earn-status-banner.is-active::before {
    content: '\f058';
    background: rgba(79, 209, 142, 0.14);
    color: #66d9a2;
}

.earn-status-banner.is-error {
    border-color: rgba(248, 113, 113, 0.3);
    background: rgba(248, 113, 113, 0.09);
    color: #f9b4b4;
}

.earn-status-banner.is-error::before {
    content: '\f071';
    background: rgba(248, 113, 113, 0.14);
    color: #f87171;
}

.earn-balance-block {
    display: grid;
    gap: 8px;
}

/*
 * One primary number (what can actually be withdrawn) instead of eight equal zeros.
 * Everything else is demoted: a small secondary row, then a collapsed breakdown.
 */
.earn-primary-metric {
    display: grid;
    gap: 4px;
    padding: 14px 14px 12px;
    border: 1px solid rgba(79, 209, 142, 0.18);
    border-radius: 14px;
    background:
        radial-gradient(circle at 96% 0%, rgba(79, 209, 142, 0.1), transparent 46%),
        rgba(255, 255, 255, 0.025);
}

.earn-primary-metric-label {
    color: #7c8f86;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.earn-primary-metric-value {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.earn-primary-metric-value strong {
    overflow: hidden;
    color: #70dca5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(1.75rem, 6vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-overflow: ellipsis;
}

.earn-primary-metric-value em {
    color: #58796b;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.earn-primary-metric-hint {
    color: #7d7672;
    font-size: 10px;
    line-height: 1.45;
}

.earn-breakdown {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(4, 3, 3, 0.34);
}

.earn-breakdown > summary {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 12px;
    color: #8a827e;
    cursor: pointer;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    list-style: none;
    text-transform: uppercase;
}

.earn-breakdown > summary::-webkit-details-marker {
    display: none;
}

.earn-breakdown > summary::before {
    content: '\f078';
    color: #ff8d56;
    font-family: 'Font Awesome 6 Free';
    font-size: 8px;
    font-weight: 900;
    transition: transform 0.18s ease;
}

.earn-breakdown[open] > summary::before {
    transform: rotate(180deg);
}

.earn-breakdown-body {
    display: grid;
    gap: 10px;
    padding: 2px 12px 12px;
}

.earn-breakdown-title {
    margin-bottom: 6px;
    color: #6a635f;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.earn-breakdown-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.earn-breakdown-item {
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}

.earn-breakdown-item > div {
    overflow: hidden;
    color: #ded8d5;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
}

.earn-breakdown-item > div.is-held {
    color: #e0b45f;
}

.earn-breakdown-item > div.is-pending {
    color: #8fbede;
}

.earn-breakdown-item > span {
    display: block;
    margin-top: 3px;
    color: #69625e;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Shown when the backend response carries no curve/mint split. The dashes above are
   "unknown", not "zero" — the note says so instead of letting the user read a 0. */
.earn-breakdown-note {
    margin-top: 6px;
    color: #8a817c;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.45;
}

.earn-breakdown-group.is-unavailable .earn-breakdown-item > div {
    color: #7d7671;
}

.earn-activity-empty {
    display: grid;
    gap: 3px;
    padding: 22px 12px;
    color: #6f6864;
    font-size: 10px;
    line-height: 1.45;
    text-align: center;
}

.earn-activity-empty strong {
    color: #a29a95;
    font-size: 10px;
    font-weight: 800;
}

.earn-verified-strip {
    justify-content: space-between;
    gap: 10px;
    color: #70dca5;
    font-size: 10px;
    font-weight: 800;
}

.earn-verified-strip span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.earn-verified-strip small {
    color: #6f6864;
    font-size: 9px;
    font-weight: 600;
}

.earn-link-card,
.earn-activity-panel {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(4, 3, 3, 0.34);
}

.earn-card-label {
    margin-bottom: 8px;
}

.earn-icon-button {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 1px solid rgba(255, 126, 63, 0.2);
    color: #ff8d56;
}

.earn-icon-button:hover {
    border-color: rgba(255, 126, 63, 0.42);
    background: rgba(255, 107, 53, 0.08);
}

.earn-card-status {
    min-height: 14px;
    margin-top: 6px;
    color: #817a76;
    font-size: 9px;
    line-height: 1.4;
    text-align: center;
}

.earn-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.earn-metric-card {
    min-width: 0;
    padding: 11px 10px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.025);
}

.earn-metric-card > div {
    overflow: hidden;
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
}

.earn-metric-card > span {
    display: block;
    margin-top: 4px;
    color: #69625e;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.earn-metric-card.is-earned > div {
    color: #ff9a69;
}

.earn-metric-card.is-available > div {
    color: #70dca5;
}

.earn-withdraw-wrap .earn-primary-action {
    margin-top: 0;
}

.earn-activity-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 10px;
    padding: 3px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.035);
}

.earn-activity-tabs button {
    min-height: 36px;
    border-radius: 7px;
    color: #716a66;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.06em;
}

.earn-activity-tabs button[aria-selected='true'] {
    background: rgba(255, 107, 53, 0.1);
    color: #ff945f;
}

.earn-secondary-action {
    width: 100%;
    min-height: 40px;
    margin-top: 8px;
    border: 1px solid rgba(255, 126, 63, 0.16);
    color: #ff925d;
    font-size: 9px;
}

.earn-benefits {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.earn-benefit-card {
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 10px 12px;
    border-color: rgba(255, 255, 255, 0.055);
    background: rgba(18, 12, 9, 0.72);
}

.earn-benefit-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border: 1px solid rgba(255, 126, 63, 0.17);
    border-radius: 9px;
    background: rgba(255, 107, 53, 0.06);
    color: #ff8e57;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    font-weight: 800;
}

.earn-benefit-card h2 {
    color: #eae6e4;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
}

.earn-benefit-card p {
    margin-top: 3px;
    color: #68615d;
    font-size: 9px;
    line-height: 1.25;
}

[data-earn-phase='verified'] > .earn-status-dot,
.earn-state-badge[data-earn-phase='verified']::before {
    background: #58d895;
}

.earn-state-badge[data-earn-phase='locked'],
.earn-state-badge[data-earn-phase='unavailable'] {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: #aaa19c;
}

@media (max-width: 1023px) {
    .fennec-mobile-menu:not(.hidden) {
        display: block !important;
    }

    .earn-hero-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (min-width: 640px) {
    .earn-site-header-grid {
        grid-template-columns: minmax(110px, 1fr) 44px minmax(110px, 1fr);
    }

    #sec-portfolio[data-fennec-surface='earn'] {
        padding-top: 6rem !important;
    }

    .earn-state-column,
    .earn-connect-card {
        min-height: 250px;
    }

    .earn-connect-card,
    .earn-workspace-card {
        padding: 24px;
    }

    .earn-benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .earn-metrics-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .earn-breakdown-body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .earn-title {
        font-size: clamp(34px, 9.5vw, 37px) !important;
        line-height: 0.94 !important;
        max-width: 100%;
        overflow-wrap: normal;
    }

    .earn-lead {
        margin-top: 8px;
    }

    .earn-trust-row {
        margin-top: 7px;
    }

    .earn-eyebrow {
        margin-bottom: 8px;
    }

    .earn-hero-layout {
        gap: 12px;
    }

    .earn-workspace-heading {
        align-items: flex-start;
    }

    .earn-state-badge {
        white-space: nowrap;
    }

    .earn-progress-steps {
        gap: 5px;
    }

    .earn-progress-steps li {
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 4px;
    }

    .earn-progress-steps li > span {
        width: 22px;
        height: 22px;
    }

    .earn-verified-strip {
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }
}

@media (min-width: 1024px) {
    .fennec-desktop-nav,
    .fennec-desktop-control {
        display: flex !important;
    }

    .fennec-desktop-nav {
        align-items: center;
        column-gap: clamp(0.75rem, 1.5vw, 1.5rem);
        white-space: nowrap;
    }

    .fennec-desktop-nav .nav-link {
        display: inline-flex;
        align-items: center;
    }

    .fennec-mobile-menu-btn,
    .fennec-mobile-menu {
        display: none !important;
    }

    .earn-site-header-grid {
        grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
    }

    .earn-hero-layout {
        grid-template-areas:
            "copy state"
            "benefits state";
        grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
        grid-template-rows: auto 1fr;
        column-gap: 30px;
        row-gap: 20px;
        align-items: stretch;
    }

    .earn-hero-copy {
        grid-area: copy;
        padding-top: 20px;
    }

    .earn-state-column {
        grid-area: state;
        min-height: 352px;
    }

    /*
     * The state column spans both rows, so the `1fr` benefits row grows with the
     * workspace panel. Keep the explainer cards at their natural height and pinned
     * to the top of that row instead of stretching into tall empty boxes.
     */
    .earn-benefits {
        grid-area: benefits;
        align-self: start;
    }

    .earn-connect-card {
        min-height: 100%;
        padding: 30px;
    }

    .earn-workspace-card {
        min-height: 288px;
    }

    /* Connected: one full-width workspace, wider shell, metrics left / activity right. */
    #sec-portfolio[data-earn-layout='connected'] {
        max-width: 72rem;
    }

    #sec-portfolio[data-earn-layout='connected'] .earn-state-column {
        min-height: 0;
    }

    #sec-portfolio[data-earn-layout='connected'] .earn-workspace-card {
        min-height: 0;
        padding: 24px 26px;
    }

    .earn-dashboard {
        grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
        column-gap: 18px;
        align-items: stretch;
    }

    /* Keep the activity column the same height as the balances column, so the
       zero-state reads as an empty ledger instead of a void next to the panel. */
    .earn-dashboard-side {
        align-content: stretch;
    }

    .earn-dashboard-side .earn-activity-panel {
        display: flex;
        flex-direction: column;
    }

    .earn-dashboard-side #portfolioRefActivity {
        flex: 1 1 auto;
    }

    .earn-dashboard-side .earn-activity-empty {
        align-content: center;
        height: 100%;
    }

    .earn-primary-metric {
        padding: 18px 18px 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .earn-primary-action,
    .earn-secondary-action,
    .earn-secondary-link,
    .earn-icon-button {
        transition: none;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
 * `.hidden` OVERRIDE TAIL — currently EMPTY, and that is the intended state.
 *
 * The contract (`.hidden{display:none!important}`, top of this file) is FIRST on
 * purpose: a later, explicit `display:<x>!important` rule must still be able to win,
 * which is how the `.fennec-desktop-nav` / `.fennec-mobile-menu-btn` breakpoint
 * contract works. The side effect is that every OTHER `display:<x>!important` rule
 * below also silently beats `hidden`.
 *
 * The roadmap / vision / phase / evolution families used to be exactly that accident
 * and were neutralised here with `<selector>.hidden{display:none!important}` rules.
 * They have since been proven to have ZERO occurrences in any shipped HTML or JS (no
 * class attribute, no className/classList, no string concatenation, no innerHTML
 * template — vision-proof.html is a meta-refresh stub with no markup at all), so the
 * dead CSS was DELETED instead of shielded. An override tail doubles the rule count
 * and hides unused code; it is only justified for selectors that are still reachable
 * from external or dynamically generated markup, or during a back-compat window.
 *
 * If such a selector reappears, add `<selector>.hidden{display:none!important}` HERE
 * — specificity (0,2,0) beats their (0,1,0), and media queries add no specificity, so
 * it wins at every breakpoint.
 *
 * test/hidden_contract.test.js enforces the invariant: EVERY `display:<value>!important`
 * in the hand-written stylesheets — including `display:none!important` — must either
 * match a narrow documented contract shape, sit on the documented allowlist in that
 * test, or appear in this tail.
 * ════════════════════════════════════════════════════════════════════════════ */