/* Hallmark · genre: modern-minimal technical workbench · tone: restrained · theme: studied-DNA (source: user calculator reference) · anchor: mint · macrostructure: Compact Protocol Card · variation: single-column protocol card + FDV scenario bars · nav/footer: existing project chrome */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass (40–41) · slop: pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive/mobile: pass (34, 49–57) · icons: pass (30) */
/* ============================================
   FomoPerp — Design System & Styles
   ============================================ */

/* Modernist design system — Archivo, warm near-black, single red accent */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');

/* --- CSS Variables (Modernist dark) --- */
:root {
    --bg-primary: #0c0b0b;    /* page */
    --bg-secondary: #0f0e0e;  /* table / panels */
    --bg-tertiary: #141312;   /* cards */
    --bg-elevated: #191817;   /* emphasized cells */
    --bg-hover: #1a1918;
    --bg-active: #201e1d;

    --border-primary: rgba(255, 255, 255, 0.12);  /* structural rule */
    --border-subtle: rgba(255, 255, 255, 0.06);   /* row divider */
    --border-accent: #ec3013;

    --text-primary: #f4f3f2;
    --text-secondary: #c9c7c4;
    --text-tertiary: #8a8784;
    --text-muted: #6b6764;

    --accent: #ec3013;
    --accent-hover: #ff4526;
    --accent-glow: rgba(236, 48, 19, 0.28);

    --positive: #69c79a;
    --positive-bg: rgba(105, 199, 154, 0.12);
    --positive-dim: #57c08f;
    --negative: #e0674f;
    --negative-bg: rgba(224, 103, 79, 0.12);
    --negative-dim: #cc5a44;

    --warning: #f4b740;
    --info: #8b86a8;

    --font-sans: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Sharp corners are intentional to the aesthetic (0 everywhere; --radius-full
       kept only for genuine circles like status dots) */
    --radius-sm: 0px;
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-xl: 0px;
    --radius-full: 0px;

    /* Flat — the strength of the rules does the organising, not shadows */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-glow: none;

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;

    --header-height: 56px;
    --footer-height: 40px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    background: var(--bg-primary);
    overflow-x: clip;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    position: relative;
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--accent-hover); }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ============================================
   HEADER
   ============================================ */
#main-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-height);
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(16px);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    border-bottom: 2px solid var(--border-primary);
    position: relative;
}

.header-left { flex: 1; display: flex; align-items: center; gap: 12px; }
.header-center { flex: 2; display: flex; align-items: center; justify-content: center; }
.header-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}
.logo-text {
    font-weight: 900;
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-primary);
}
.logo-icon {
    font-size: 1.4rem;
    color: var(--accent);
    filter: drop-shadow(0 0 6px var(--accent-glow));
    animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
    0%, 100% { filter: drop-shadow(0 0 6px var(--accent-glow)); }
    50% { filter: drop-shadow(0 0 14px var(--accent-glow)); }
}

.header-nav {
    display: flex;
    gap: 28px;
    align-items: center;
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.nav-icon {
    padding: 8px 4px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-link:hover:not(.disabled) .nav-icon {
    color: var(--text-primary);
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.18);
}

.nav-link.active .nav-icon {
    color: var(--text-primary);
    font-weight: 700;
    background: transparent;
    border-bottom-color: var(--accent);
    box-shadow: none;
}

.nav-link.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.nav-link.disabled .nav-icon::before {
    opacity: 0.15;
}

/* Live indicator */
.live-indicator { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--positive); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.live-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--positive);
    box-shadow: 0 0 8px var(--positive);
    animation: liveBlink 2s ease-in-out infinite;
}
@keyframes liveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); }


.btn-sm { padding: 4px 10px; font-size: 0.75rem; }

/* ============================================
   MAIN
   ============================================ */
#main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 24px 20px 80px 20px;
    gap: 16px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}

.section-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 24px 0;
    width: 100%;
}

/* ============================================
   TOOLBAR
   ============================================ */
.toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toolbar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.toolbar-3col {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
}
.toolbar-left { display: flex; justify-content: flex-start; }
.toolbar-center { display: flex; justify-content: center; }
.toolbar-right { display: flex; justify-content: flex-end; }

/* Keep the funding timeframe switcher on the table's exact center axis. */
#table-toolbar .toolbar-3col {
    grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1fr);
}

#table-toolbar .toolbar-left {
    grid-column: 1;
}

#table-toolbar .toolbar-center {
    grid-column: 2;
    justify-self: center;
}

#table-toolbar .toolbar-right {
    grid-column: 3;
}

/* Search */
.btn-outline {
    height: 38px;
    border-radius: 0;
    border: 1px solid var(--border-primary);
    background: transparent;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 16px;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 6px;
}
.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

.search-wrapper {
    height: 38px;
    border-radius: 0;
    border: 1px solid var(--border-primary);
    background: transparent;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 8px;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}
.search-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.4);
}
.search-wrapper input {
    height: 100%;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    outline: none;
    width: 240px;
}
.search-wrapper input::placeholder {
    color: var(--text-muted);
}
.search-icon {
    color: var(--text-muted);
    transition: color 0.2s ease;
    flex-shrink: 0;
}
.search-wrapper:focus-within .search-icon {
    color: var(--text-primary);
}

/* Lang Switcher */
.lang-switcher {
    position: relative;
    display: inline-block;
}
.lang-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    min-width: 120px;
    z-index: 200;
    overflow: hidden;
    animation: fadeIn 0.15s ease-out;
}
.lang-dropdown.hidden {
    display: none;
}
.lang-option {
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.lang-option:hover {
    background: var(--bg-hover);
}
.lang-option.active {
    color: var(--accent);
    background: rgba(255, 255, 255, 0.05);
}

/* Timeframe pills */

.pill {
    padding: 6px 14px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.pill:hover { color: var(--text-primary); border-color: var(--text-tertiary); }
.pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
    box-shadow: none;
}

.toolbar-actions { display: flex; align-items: center; gap: 10px; }
.exchange-count { font-size: 0.8rem; color: var(--text-tertiary); }
.exchange-count-num { color: var(--text-secondary); font-weight: 600; }

/* ============================================
   EXCHANGE SELECTOR MODAL
   ============================================ */
.exm-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}
.exm {
    width: 92%;
    max-width: 760px;
    max-height: 85vh;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 40px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    animation: modalSlide 0.25s ease;
    overflow: hidden;
}

/* Header */
.exm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 26px 16px;
}
.exm-header-info { display: flex; flex-direction: column; gap: 2px; }
.exm-title { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; }
.exm-subtitle { font-size: 0.85rem; color: var(--text-tertiary); font-weight: 500; }
.exm-close-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--text-tertiary);
    font-size: 1.6rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
.exm-close-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

/* Quick Action Buttons */
.exm-actions {
    display: flex;
    gap: 8px;
    padding: 0 26px 18px;
}
.exm-action-btn {
    padding: 7px 16px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.exm-action-btn:hover { border-color: var(--text-tertiary); color: var(--text-primary); }
.exm-action-btn.active {
    background: transparent;
    border-color: var(--text-primary);
    color: var(--text-primary);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
}

/* Body / Scrollable */
.exm-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.exm-section-label {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
    position: relative;
}
.exm-section-label::before,
.exm-section-label::after {
    content: '';
    position: absolute;
    top: 50%;
    width: calc(50% - 30px);
    height: 1px;
    background: var(--border-primary);
}
.exm-section-label::before { left: 0; }
.exm-section-label::after { right: 0; }

/* Grid: 2 columns */
.exm-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 20px;
}

@media (min-width: 680px) {
    .exm-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px 24px;
    }
}

/* Exchange Row */
.exm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    user-select: none;
    transition: opacity var(--transition-fast);
}
.exm-row:hover { opacity: 0.85; }
.exm-row.disabled { opacity: 0.35; }

/* Toggle Switch */
.exm-toggle {
    position: relative;
    width: 40px; height: 22px;
    flex-shrink: 0;
}
.exm-toggle input {
    opacity: 0;
    width: 0; height: 0;
    position: absolute;
}
.exm-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--bg-active);
    border: 1px solid var(--border-primary);
    border-radius: 0;
    transition: all var(--transition-normal);
    cursor: pointer;
}
.exm-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: var(--text-tertiary);
    border-radius: 50%;
    transition: all var(--transition-normal);
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.exm-toggle input:checked + .exm-toggle-track {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}
.exm-toggle input:checked + .exm-toggle-track::after {
    transform: translateX(18px);
    background: #ffffff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 2px 4px rgba(0,0,0,0.5);
}

/* Color Dot */
.exm-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 6px currentColor;
}

/* Exchange Icon */
.exm-icon {
    width: 22px; height: 22px;
    border-radius: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
}

/* Name & Pairs */
.exm-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exm-pairs {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    min-width: 32px;
    text-align: right;
}

@media (max-width: 480px) {
    .exm-grid { grid-template-columns: 1fr; }
    .exm { max-width: 95%; }
}


/* ============================================
   STATS BAR
   ============================================ */
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat-card {
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast);
}
.stat-card:hover { border-color: var(--accent); }
.stat-label { font-size: 0.7rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; font-weight: 600; }
.stat-value { font-size: 1.15rem; font-weight: 700; font-family: var(--font-mono); }
.stat-value.positive { color: var(--positive); }
.stat-value.negative { color: var(--negative); }

/* ============================================
   DATA TABLE
   ============================================ */
.table-container {
    position: relative;
    flex: 0 1 auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.table-scroll {
    overflow: auto;
    max-height: calc(100vh - var(--header-height) - var(--footer-height) - 240px);
    transition: max-height 0.4s ease;
}
.table-scroll.expanded {
    max-height: calc(100vh - var(--header-height) - var(--footer-height) - 80px);
}
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}
.data-table thead { position: sticky; top: 0; z-index: 10; }
.data-table th {
    padding: 8px 10px;
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    white-space: nowrap;
    border-bottom: 2px solid var(--border-primary);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-fast);
}
.data-table th:last-child {
    border-right: none;
}
.data-table th:hover { color: var(--text-primary); }
.sort-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
}
.sort-arrow::after { content: '\2195'; opacity: 0.4; }
th.sort-asc .sort-arrow::after { content: '\2191'; opacity: 1; color: var(--accent); }
th.sort-desc .sort-arrow::after { content: '\2193'; opacity: 1; color: var(--accent); }

.data-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
    white-space: nowrap;
    text-align: center;
    transition: background var(--transition-fast);
}
.data-table td:last-child {
    border-right: none;
}
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover td { background: var(--bg-hover); }
.data-table tbody tr:active td { background: var(--bg-active); }

/* Sticky columns */
.th-asset, .td-asset { position: sticky; left: 0; z-index: 5; background: var(--bg-tertiary); min-width: 90px; }
.td-asset { background: var(--bg-secondary); font-weight: 800; text-align: center; }
.data-table tbody tr:hover .td-asset { background: var(--bg-hover); }
.asset-name { display: flex; align-items: center; justify-content: center; gap: 8px; }
.asset-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--bg-active);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; font-weight: 700; color: var(--accent);
    flex-shrink: 0;
    overflow: hidden;
}
.asset-icon img { width: 100%; height: 100%; object-fit: cover; }

.th-spread, .td-spread { position: sticky; left: 90px; z-index: 5; background: var(--bg-tertiary); min-width: 80px; }
.td-spread { background: var(--bg-secondary); color: var(--text-primary); font-family: var(--font-mono); font-weight: 700; text-align: center; }
.data-table tbody tr:hover .td-spread { background: var(--bg-hover); }

.th-direction, .td-direction { position: sticky; left: 230px; z-index: 5; background: var(--bg-tertiary); min-width: 170px; }
.td-direction { background: var(--bg-secondary); }
.data-table tbody tr:hover .td-direction { background: var(--bg-hover); }

/* Custom Scrollbar — Bottom */
.custom-scroll-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px 12px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
    position: relative;
    overflow: hidden;
}

.custom-scroll-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(0, 0, 0, 0.4),
        rgba(0, 214, 143, 0.4),
        rgba(0, 0, 0, 0.4),
        transparent
    );
    animation: scrollbar-border-shimmer 4s ease-in-out infinite;
}

@keyframes scrollbar-border-shimmer {
    0%, 100% { opacity: 0.3; width: 40%; }
    50% { opacity: 1; width: 80%; }
}

.scroll-track-wrapper {
    width: 100%;
    max-width: 600px;
    padding: 4px 0;
}

.scroll-track {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
}

.scroll-track::before {
    content: '';
    position: absolute;
    inset: -4px -2px;
    border-radius: 0;
    background: transparent;
    transition: background 0.3s ease;
}

.scroll-track:hover {
    height: 8px;
    background: rgba(255, 255, 255, 0.06);
}

.scroll-track:hover::before {
    background: rgba(0, 0, 0, 0.04);
}

.scroll-track-glow {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-50%);
    border-radius: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(0, 0, 0, 0.08) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.scroll-track:hover .scroll-track-glow {
    opacity: 1;
}

.scroll-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 100%;
    min-width: 40px;
    width: 80px;
    border-radius: 0;
    cursor: grab;
    transition: transform 0.08s ease-out, height 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
    z-index: 2;
}

.scroll-thumb-inner {
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.7),
        rgba(0, 214, 143, 0.5)
    );
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-thumb-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    animation: thumb-shine 3s ease-in-out infinite;
}

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

.scroll-thumb::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 0;
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.3),
        rgba(0, 214, 143, 0.2)
    );
    filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.scroll-track:hover .scroll-thumb {
    height: 120%;
}

.scroll-track:hover .scroll-thumb-inner {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.85),
        rgba(0, 214, 143, 0.65)
    );
}

.scroll-track:hover .scroll-thumb::after {
    opacity: 1;
}

.scroll-thumb:active {
    cursor: grabbing;
}

.scroll-thumb:active .scroll-thumb-inner {
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 1),
        rgba(0, 214, 143, 0.8)
    );
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.4);
}

/* Direction badge */
.direction-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.direction-badge.long { background: var(--positive-bg); color: var(--positive); }
.direction-badge.short { background: var(--negative-bg); color: var(--negative); }
.direction-arrow { font-size: 0.55rem; }

/* Exchange rate cells */
.td-rate { min-width: 70px; text-align: center; font-family: var(--font-mono); font-size: 0.8rem; position: relative; }
.td-rate.rate-positive { color: var(--text-tertiary); }
.td-rate.rate-negative { color: var(--text-tertiary); }
.td-rate.rate-zero { color: var(--text-tertiary); }
.td-rate.rate-none { color: var(--text-muted); font-style: italic; }

.td-rate.highlight-long {
    background: rgba(87, 192, 143, 0.18) !important;
    color: #57c08f !important;
    font-weight: 800;
    border-radius: 4px;
}
.td-rate.highlight-short {
    background: rgba(255, 79, 100, 0.18) !important;
    color: #FF4F64 !important;
    font-weight: 800;
    border-radius: 4px;
}

.th-exchange {
    text-align: center;
    min-width: 70px;
    position: relative;
}

.th-exchange-icon { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }

/* Table states */
.table-loading, .table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 280px;
    padding: 48px 24px;
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    font-size: 0.875rem;
    text-align: center;
}
.table-empty svg { color: var(--text-tertiary); }
.table-empty-title {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.table-empty-sub {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
}
.table-loading span {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.hidden { display: none !important; }

.spinner {
    width: 28px; height: 28px;
    border: 3px solid var(--border-primary);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================
   MODAL
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
    width: 98%;
    max-width: 1800px;
    max-height: 95vh;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    animation: modalSlide 0.25s ease;
}
@keyframes modalSlide {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-primary);
}
.modal-title { font-size: 1.1rem; font-weight: 700; }
.modal-close { font-size: 1.5rem; line-height: 1; padding: 4px 8px; }
.modal-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 20px; }

#share-modal {
    width: min(760px, calc(100vw - 32px));
    max-width: 760px;
    box-sizing: border-box;
    overflow-x: hidden;
}

#share-modal .strategy-share-title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-yield-display);
    font-size: clamp(1.15rem, 4vw, 1.55rem);
    font-style: normal;
    font-weight: 760;
    line-height: 1.1;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}

#share-modal > .modal-body {
    padding: 28px;
}

.strategy-share-modal-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

.strategy-share-modal-actions > * {
    min-width: 0;
    box-sizing: border-box;
}

@media (max-width: 560px) {
    #share-modal > .modal-body {
        padding: 20px;
    }

    .strategy-share-modal-actions {
        grid-template-columns: 1fr;
    }
}
.modal-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.modal-section-header h3 { margin-bottom: 0; }
.modal-section h3 { font-size: 0.8rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; margin-bottom: 10px; }
.chart-mode-selector { display: flex; background: rgba(0,0,0,0.2); border-radius: 0; padding: 2px; border: 1px solid rgba(255,255,255,0.05); }
.strategy-chart-mode-btn { background: transparent; border: none; color: var(--text-tertiary); font-size: 0.65rem; font-weight: 700; font-family: var(--font-sans); padding: 4px 10px; border-radius: 4px; cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; }
.strategy-chart-mode-btn:hover { color: var(--text-primary); }
.strategy-chart-mode-btn.active { background: rgba(255,255,255,0.1); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.chart-timeframe-selector { display: flex; background: rgba(0,0,0,0.2); border-radius: 0; padding: 2px; border: 1px solid rgba(255,255,255,0.05); }
.chart-tf-btn { background: transparent; border: none; color: var(--text-tertiary); font-size: 0.7rem; font-weight: 700; font-family: var(--font-sans); padding: 4px 10px; border-radius: 4px; cursor: pointer; transition: all var(--transition-fast); }
.chart-tf-btn:hover { color: var(--text-primary); }
.chart-tf-btn.active { background: rgba(255,255,255,0.1); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.chart-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.chart-stat-card { background: rgba(0,0,0,0.2); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.chart-stat-label { font-size: 0.65rem; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.chart-stat-value { font-size: 1.1rem; font-weight: 800; font-family: var(--font-mono); color: var(--text-primary); }
.modal-rates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.modal-rate-card {
    padding: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    gap: 4px;
    white-space: nowrap;
}
.modal-rate-exchange { font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; display: flex; align-items: center; gap: 5px; }
.modal-rate-value { font-size: 1rem; font-weight: 700; font-family: var(--font-mono); }

.modal-arb-pair {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.modal-arb-leg {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding: 10px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.modal-arb-leg.leg-long {
    border-color: rgba(0, 214, 143, 0.4);
    background: rgba(0, 214, 143, 0.05);
}
.modal-arb-leg.leg-long:hover {
    border-color: rgba(0, 214, 143, 0.8);
    background: rgba(0, 214, 143, 0.12);
    transform: translateY(-1px);
}
.modal-arb-leg.leg-short {
    border-color: rgba(255, 107, 107, 0.4);
    background: rgba(255, 107, 107, 0.05);
}
.modal-arb-leg.leg-short:hover {
    border-color: rgba(255, 107, 107, 0.8);
    background: rgba(255, 107, 107, 0.12);
    transform: translateY(-1px);
}
.modal-arb-leg-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.modal-arb-leg-label.long { color: var(--positive); }
.modal-arb-leg-label.short { color: var(--negative); }
.modal-arb-leg-exchange { font-size: 0.9rem; font-weight: 600; }
.modal-arb-leg-rate { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-secondary); }
.modal-arb-leg-rate.funding-rate-positive { color: var(--positive) !important; }
.modal-arb-leg-rate.funding-rate-negative { color: var(--negative) !important; }
.modal-arb-leg-rate.funding-rate-neutral { color: var(--text-primary) !important; }
.modal-arb-vs { 
    font-size: 0.75rem; 
    color: var(--text-tertiary); 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.05em; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.modal-arb-apr {
    text-align: center;
    padding: 8px 0;
    border-left: 1px solid var(--border-subtle);
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.modal-arb-apr-label {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.modal-arb-apr-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--positive);
    font-family: var(--font-mono);
}

.modal-chart-placeholder {
    height: 200px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    overflow: hidden;
}

/* ============================================
   FOOTER
   ============================================ */
#main-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    height: var(--footer-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.75rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.footer-left { flex: 1; display: flex; align-items: center; gap: 8px; }
.footer-brand { font-weight: 700; color: var(--text-secondary); }
.footer-center { flex: 0 0 auto; font-family: var(--font-mono); text-align: center; }
.footer-right { flex: 1; display: flex; justify-content: flex-end; gap: 16px; }
.footer-link { color: var(--text-tertiary); font-weight: 500; }
.footer-link:hover { color: var(--text-primary); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .header-nav { display: none; }
    .stats-bar { grid-template-columns: repeat(2, 1fr); }
    .toolbar-3col { flex-direction: column; align-items: stretch; }
    
    .timeframe-pills { justify-content: center; }
    #main-footer { flex-direction: column; height: auto; padding: 10px 20px; gap: 6px; text-align: center; }
    #main-content { padding-bottom: 120px; }
    .tier-badge { width: 90px !important; min-width: 90px !important; font-size: 0.55rem !important; }
    .strategy-exchanges { flex-direction: column; }
    .strategy-vs { flex-direction: row; }
    .strategy-vs-line { width: 40px; height: 1px; }
}

/* ============================================
   TIER LIST SECTION
   ============================================ */
.tierlist-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
}

.tierlist-header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-primary);
}

.tierlist-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.update-hint {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.tierlist-container {
    display: flex;
    flex-direction: column;
}

.tier-row {
    display: flex;
    align-items: stretch;
    min-height: 46px;
    border-bottom: 1px solid var(--border-primary);
    transition: background 150ms ease;
}

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

.tier-row:hover {
    background: rgba(255, 255, 255, 0.015);
}

/* ---- Tier badges ---- */
.tier-badge {
    width: 48px;
    min-width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 900;
    font-family: var(--font-primary);
    letter-spacing: -0.02em;
    border-right: 1px solid var(--border-primary);
    user-select: none;
    flex-shrink: 0;
}

.tier-s { background: #ff7675; color: #1a0000; }
.tier-a { background: #fdcb6e; color: #1a1400; }
.tier-b { background: #ffeaa7; color: #1a1600; }
.tier-c { background: #57c08f; color: #04140c; }
.tier-d { background: #f4b740; color: #1a1200; }
.tier-e { background: #8b86a8; color: #14121a; }
.tier-f { background: #fd79a8; color: #1a0012; }

/* ---- Token chips area ---- */
.tier-tokens {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    min-height: 46px;
}

.tier-tokens:empty::after {
    content: '\2014';
    color: var(--text-quaternary, rgba(255,255,255,0.1));
    font-size: 0.75rem;
    font-family: var(--font-mono);
}

/* ---- Token chip ---- */
.tier-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 0;
    border: 1px solid var(--border-primary);
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
    transition: all 150ms ease;
    text-decoration: none;
    user-select: none;
}

.tier-chip:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.07);
    transform: translateY(-1px);
}

.tier-chip:active {
    transform: translateY(0);
}

.tier-chip-name {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
}

.tier-chip-apr {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

/* Highlight chips in new strategy tiers */
.tier-row[data-tier="HIGH_APR"] .tier-chip {
    border-color: rgba(255, 118, 117, 0.25);
    background: rgba(255, 118, 117, 0.05);
}
.tier-row[data-tier="HIGH_APR"] .tier-chip:hover {
    border-color: rgba(255, 118, 117, 0.5);
    background: rgba(255, 118, 117, 0.1);
}
.tier-row[data-tier="STABILITY"] .tier-chip {
    border-color: rgba(236, 48, 19, 0.25);
    background: rgba(236, 48, 19, 0.05);
}
.tier-row[data-tier="STABILITY"] .tier-chip:hover {
    border-color: rgba(236, 48, 19, 0.5);
    background: rgba(236, 48, 19, 0.1);
}
.tier-row[data-tier="STEADY"] .tier-chip {
    border-color: rgba(85, 239, 196, 0.25);
    background: rgba(85, 239, 196, 0.05);
}
.tier-row[data-tier="STEADY"] .tier-chip:hover {
    border-color: rgba(85, 239, 196, 0.5);
    background: rgba(85, 239, 196, 0.1);
}
.tier-row[data-tier="DEX_PREMIUM"] .tier-chip {
    border-color: rgba(162, 155, 254, 0.25);
    background: rgba(162, 155, 254, 0.05);
}
.tier-row[data-tier="DEX_PREMIUM"] .tier-chip:hover {
    border-color: rgba(162, 155, 254, 0.5);
    background: rgba(162, 155, 254, 0.1);
}


/* ============================================
   SPARKLINE ANOMALY TICKER
   ============================================ */
.anomaly-ticker-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
    overflow: hidden;
    position: relative;
}

/* Loading overlay for the stable-strategy cards window */
.ticker-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(8, 7, 7, 0.72);
    backdrop-filter: blur(1.5px);
    transition: opacity 0.2s ease;
}
.ticker-loading-overlay.hidden {
    display: none;
}
.ticker-loading-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(255, 255, 255, 0.14);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ticker-spin 0.8s linear infinite;
}
@keyframes ticker-spin {
    to { transform: rotate(360deg); }
}
.ticker-loading-text {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.anomaly-ticker-title {
    font-size: 0.85rem; /* Larger, professional font size */
    font-weight: 800; /* Solid bold presentation */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-primary); /* Brighter, high-contrast text color */
    font-family: var(--font-mono);
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.anomaly-ticker {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    padding: 4px 4px 12px 4px;
    align-items: flex-start;
}

.anomaly-ticker::-webkit-scrollbar {
    height: 4px;
}

.anomaly-ticker::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.anomaly-ticker::-webkit-scrollbar-track {
    background: transparent;
}

.anomaly-ticker::-webkit-scrollbar-button {
    display: none;
}

.ticker-card {
    flex: 0 0 260px;
    background: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-radius: 12px;
    padding: 18px 18px 0;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
    height: 210px;
    min-height: 210px;
}

@keyframes card-silver-shimmer {
    0% {
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 255, 255, 0), inset 0 0 8px rgba(255, 255, 255, 0.02);
    }
    50% {
        border-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 255, 255, 0.25), inset 0 0 20px rgba(255, 255, 255, 0.1);
    }
    100% {
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 10px rgba(255, 255, 255, 0), inset 0 0 8px rgba(255, 255, 255, 0.02);
    }
}

.ticker-card:hover {
    background: var(--bg-elevated);
    border-color: rgba(255, 255, 255, 0.22);
}

/* Trend indicator styles */
.ticker-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--font-mono);
}

.ticker-trend.trend-up {
    color: #57c08f;
}

.ticker-trend.trend-down {
    color: #ff4f64;
}

.ticker-trend.trend-stable {
    color: var(--text-tertiary);
}

.ticker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ticker-token {
    font-size: 1.15rem;
    font-weight: 800;
    color: #ffffff;
    font-family: var(--font-sans);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ticker-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 0;
    font-family: var(--font-sans);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #8e8e93;
    letter-spacing: 0.02em;
}

.ticker-badge.high-apr {
    color: var(--negative);
    border-color: rgba(224, 103, 79, 0.28);
    background: rgba(224, 103, 79, 0.06);
}

.ticker-badge.stability {
    color: var(--text-tertiary);
    border-color: var(--border-primary);
    background: transparent;
}

.ticker-badge.steady {
    color: var(--positive);
    border-color: rgba(105, 199, 154, 0.28);
    background: rgba(105, 199, 154, 0.06);
}

.ticker-badge.dex-premium {
    color: var(--warning);
    border-color: rgba(244, 183, 64, 0.28);
    background: rgba(244, 183, 64, 0.06);
}

.ticker-badge.streak {
    color: var(--positive-dim);
    border-color: rgba(87, 192, 143, 0.28);
    background: rgba(87, 192, 143, 0.06);
}

.ticker-chart-box {
    flex-grow: 1;
    min-height: 70px;
    position: relative;
    margin: 0 -16px;
    overflow: hidden;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.ticker-chart-box svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ticker-card .ticker-chart-box path {
    filter: none;
}

.ticker-card:hover .ticker-chart-box path {
    stroke-width: 2.2px;
}

.ticker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-mono);
    gap: 8px;
}

.ticker-apr {
    font-weight: 700;
    font-size: 1.3rem;
    font-family: var(--font-sans);
    color: #ffffff;
    letter-spacing: -0.02em;
}

.ticker-venues-box {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.venue-badge {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.venue-arrow {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.25);
    font-weight: 700;
    margin: 0 2px;
}


/* ============================================
   DISCOVERY CARD SIZES & ANOMALIES
   ============================================ */
/* Filter Tabs (Shared between discovery and exchanges) */
.discovery-filter-tabs, .ex-campaign-filters {
    display: flex;
    gap: 6px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-primary);
    border-radius: 0;
    padding: 3px;
}

.discovery-filter-tabs .filter-tab,
.ex-campaign-filters .filter-tab {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-tertiary);
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--font-sans);
    padding: 6px 14px;
    border-radius: 0;
    cursor: pointer;
    transition: all 150ms ease;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.discovery-filter-tabs .filter-tab.active,
.ex-campaign-filters .filter-tab.active {
    background: var(--accent);
    color: #ffffff;
    box-shadow: none;
}

.discovery-filter-tabs .filter-tab:hover:not(.active),
.ex-campaign-filters .filter-tab:hover:not(.active) {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
}


/* ============================================
   STRATEGY OVERLAY / PAGE
   ============================================ */
.strategy-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: flex-start; /* Fix classic scrollable centering cutoff bug */
    justify-content: center;
    animation: fadeIn 0.2s ease;
    overflow-y: auto;
    padding: 40px 20px;
}

.strategy-page {
    width: 100%;
    max-width: 1800px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 60px rgba(0, 0, 0, 0.1);
    animation: modalSlide 0.3s ease;
    overflow: hidden;
}

.strategy-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-primary);
    background: rgba(26, 26, 40, 0.6);
}

.strategy-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.strategy-back:hover {
    color: var(--text-primary);
    border-color: var(--accent);
    background: var(--accent-glow);
}

.strategy-title {
    flex: 1;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.strategy-apr-badge {
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
}

.strategy-apr-badge:hover {
    background: rgba(255, 255, 255, 0.15);
}

.strategy-backtest-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.strategy-backtest-btn:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--accent);
    background: var(--accent-glow);
}
.strategy-backtest-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

.strategy-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Strategy Hero Hex */
.strategy-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

.strategy-hexagon {
    width: 120px;
    height: 120px;
}

.strategy-hexagon svg {
    width: 100%;
    height: 100%;
}

/* Exchange Cards */
.strategy-exchanges {
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
    z-index: 50; /* Stacks dropdowns above chart section to prevent flickering */
}

.strategy-exchange-card {
    flex: 1;
    padding: 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all var(--transition-normal);
    position: relative;
}

.strategy-exchange-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.strategy-long {
    background: linear-gradient(160deg, rgba(87, 192, 143, 0.04), transparent 60%);
    border-color: rgba(87, 192, 143, 0.22) !important;
    box-shadow: 0 4px 16px rgba(87, 192, 143, 0.02);
}
.strategy-long::before {
    background: linear-gradient(90deg, var(--positive), transparent);
}

.strategy-short {
    background: linear-gradient(160deg, rgba(255, 79, 100, 0.04), transparent 60%);
    border-color: rgba(255, 79, 100, 0.22) !important;
    box-shadow: 0 4px 16px rgba(255, 79, 100, 0.02);
}
.strategy-short::before {
    background: linear-gradient(90deg, var(--negative), transparent);
}

.strategy-exchange-card:hover {
    transform: translateY(-2px);
}

.strategy-long:hover {
    border-color: rgba(87, 192, 143, 0.55) !important;
    box-shadow: 0 8px 32px rgba(87, 192, 143, 0.15) !important;
}

.strategy-short:hover {
    border-color: rgba(255, 79, 100, 0.55) !important;
    box-shadow: 0 8px 32px rgba(255, 79, 100, 0.15) !important;
}

.strategy-ex-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 0;
    font-size: 0.72rem; /* S ligeramente mayor para compensar la falta de contorno */
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: transparent !important;
    border: none !important;
    border-radius: 0;
}
.strategy-ex-badge.long {
    color: var(--positive) !important;
    text-shadow: none;
}
.strategy-ex-badge.short {
    color: var(--negative) !important;
    text-shadow: none;
}

.strategy-ex-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
}

.strategy-ex-rate {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
}
.strategy-long .strategy-ex-rate { color: var(--positive); }
.strategy-short .strategy-ex-rate { color: var(--negative); }

.strategy-ex-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

.strategy-ex-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-label {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.detail-value {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
    font-family: var(--font-mono);
}

/* VS Divider */
.strategy-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 8px;
}

.strategy-vs-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, var(--border-primary), transparent);
}

.strategy-vs-text {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    background: var(--bg-tertiary);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary);
}

/* Info Grid */
.strategy-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.strategy-info-card {
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: center;
    transition: border-color var(--transition-fast);
}
.strategy-info-card:hover {
    border-color: var(--accent);
}

.strategy-info-label {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.strategy-info-value {
    font-size: 1.05rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}
.strategy-info-value.positive { color: var(--positive); }

/* All Rates List */
.strategy-all-rates h3 {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 12px;
}

.strategy-rates-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.strategy-rate-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}
.strategy-rate-item:hover {
    border-color: var(--border-primary);
    background: var(--bg-hover);
}

.strategy-rate-exchange {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.strategy-rate-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.strategy-rate-val {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    font-weight: 500;
}
.strategy-rate-val.positive { color: var(--text-tertiary); }
.strategy-rate-val.negative { color: var(--text-tertiary); }
.strategy-rate-val.zero { color: var(--text-tertiary); }

.strategy-rate-item.is-long {
    border-color: rgba(87, 192, 143, 0.35) !important;
    background: rgba(87, 192, 143, 0.04) !important;
    box-shadow: 0 0 12px rgba(87, 192, 143, 0.08);
}
.strategy-rate-item.is-long:hover {
    border-color: rgba(87, 192, 143, 0.55) !important;
    background: rgba(87, 192, 143, 0.08) !important;
}
.strategy-rate-item.is-short {
    border-color: rgba(255, 79, 100, 0.35) !important;
    background: rgba(255, 79, 100, 0.04) !important;
    box-shadow: 0 0 12px rgba(255, 79, 100, 0.08);
}
.strategy-rate-item.is-short:hover {
    border-color: rgba(255, 79, 100, 0.55) !important;
    background: rgba(255, 79, 100, 0.08) !important;
}
.strategy-rate-item.is-long .strategy-rate-val,
.strategy-rate-item.is-short .strategy-rate-val {
    color: #fff;
    font-weight: 800;
}

/* Active exchange card in the single exchange modal with purple glow matching chart line #BB86FC */
.strategy-rate-item.is-active {
    border-color: #BB86FC !important;
    background: rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.25) !important;
}
.strategy-rate-item.is-active:hover {
    border-color: #cda4ff !important;
    background: rgba(0, 0, 0, 0.08) !important;
}
.strategy-rate-item.is-active .strategy-rate-val {
    color: #ffffff !important;
    font-weight: 800;
}

@media (max-width: 640px) {
    .strategy-info-grid { grid-template-columns: repeat(2, 1fr); }
    .strategy-rates-list { grid-template-columns: 1fr; }
    .strategy-header { flex-wrap: wrap; }
}

.strategy-share-actions {
    display: flex;
    justify-content: center;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.strategy-share-btn {
    font-family: 'JetBrains Mono', var(--font-mono), monospace;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    height: 38px;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 20px;
    color: var(--text-normal);
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04) !important;
    cursor: pointer !important;
    opacity: 1;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.strategy-share-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
}

.strategy-share-btn:active {
    transform: translateY(0);
}


.strategy-share-btn svg {
    fill: currentColor;
    display: inline-block;
    vertical-align: middle;
}

/* ============================================
   ARB TOOLTIP — COMPACT MARKET NOTE
   ============================================ */
.arb-tooltip {
    position: fixed;
    z-index: 2000;
    width: min(500px, calc(100vw - 24px));
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    background: #11100f;
    border: 1px solid #393531;
    border-radius: 0;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.48);
    transition: opacity 100ms ease;
    font-family: var(--font-sans);
}

.arb-tooltip::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 74px;
    height: 2px;
    background: var(--accent);
}

.arb-tooltip:not(.hidden) {
    opacity: 1;
}

.arb-tooltip-header {
    padding: 12px 14px 11px;
    background: #12110f;
    border-bottom: 1px solid #302d2a;
    white-space: nowrap;
}

.arb-tooltip-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
}

.arb-tooltip-label {
    color: #8c8781;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.arb-tooltip-value {
    color: #f4f1ed;
    font-family: var(--font-mono);
    font-size: 1.02rem;
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.arb-tooltip-value.positive {
    color: #f4f1ed;
}

.arb-tooltip-legs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.arb-tooltip-leg {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 11px 12px 10px;
    background: #161513;
    border: 1px solid #302d2a;
    border-radius: 0;
}

.arb-tooltip-leg.leg-long {
    background: #131815;
    border-color: #2c493a;
    border-left: 2px solid #69c79a;
}

.arb-tooltip-leg.leg-short {
    background: #191413;
    border-color: #4b302b;
    border-left: 2px solid #e0705b;
}

.arb-tooltip .leg-title {
    font-family: var(--font-sans);
    font-size: 0.56rem;
    font-weight: 750;
    letter-spacing: 0.13em;
    line-height: 1;
    text-transform: uppercase;
}

.arb-tooltip .leg-title.long {
    color: #69c79a;
}

.arb-tooltip .leg-title.short {
    color: #e0705b;
}

.arb-tooltip .leg-exchange {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 0 3px;
    padding-bottom: 9px;
    overflow: hidden;
    color: #f2efeb;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-family: var(--font-sans);
    font-size: 0.88rem;
    font-weight: 760;
    letter-spacing: -0.02em;
    line-height: 1.05;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.arb-tooltip .leg-icon {
    display: none;
}

.arb-tooltip .leg-detail {
    min-height: 19px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 12px;
}

.arb-tooltip-leg .detail-label {
    color: #87817b;
    font-family: var(--font-sans);
    font-size: 0.63rem;
    font-weight: 550;
    letter-spacing: 0.01em;
}

.arb-tooltip-leg .detail-value {
    color: #e8e4df;
    font-family: var(--font-mono);
    font-size: 0.69rem;
    font-weight: 570;
    letter-spacing: -0.025em;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
    .arb-tooltip {
        width: min(310px, calc(100vw - 16px));
    }

    .arb-tooltip-legs {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 9px;
    }
}
.modal-chart-placeholder { height: 300px; position: relative; width: 100%; margin-top: 16px; }

/* --- EXCHANGE TOOLTIP --- */
.ex-tooltip {
    position: fixed;
    background: rgba(20, 20, 22, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    min-width: 240px;
    max-width: 280px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    z-index: 10000;
    pointer-events: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
}
.ex-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 8px;
}
.ex-tooltip-name {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
.ex-tooltip-side {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary);
}
.ex-tooltip-section {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ex-tooltip-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.ex-tooltip-subtitle {
    color: var(--text-tertiary);
    font-size: 10px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 700;
}
.ex-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.5;
}
.ex-tooltip-row.highlight {
    margin-top: 8px;
    margin-bottom: 0;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}
.ex-tooltip-label {
    color: var(--text-secondary);
    font-weight: 500;
}
.ex-tooltip-value {
    font-weight: 700;
    font-family: var(--font-mono);
    font-size: 12px;
}
/* --- SHOW MORE BUTTON --- */
.show-more-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0 24px 0;
    margin-top: 0;
    position: relative;
    z-index: 10;
}
.btn-show-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.btn-show-more:hover {
    border-color: var(--text-tertiary);
    color: var(--text-primary);
    background: var(--bg-hover);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}
.btn-show-more:hover svg {
    transform: translateY(2px);
}
.btn-show-more svg {
    transition: transform 0.25s ease;
    opacity: 0.6;
}



.table-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.table-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; margin: 0 32px; }
.table-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; border: 1px solid rgba(0,0,0,0.5); }
.table-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
.table-scroll::-webkit-scrollbar-corner { background: transparent; }

/* Global scrollbar size tweak */
::-webkit-scrollbar { width: 4px; height: 4px; }

/* Scroll Arrows */
.scroll-arrow {
    position: absolute;
    bottom: -2px; /* Align with scrollbar */
    z-index: 20;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
    border-radius: 4px;
    width: 28px;
    height: 14px; /* Slightly taller than scrollbar */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.scroll-arrow:hover {
    color: var(--text-primary);
    background: #222222;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}
.scroll-arrow svg {
    width: 12px;
    height: 12px;
}
.scroll-arrow-left {
    left: 0;
}
.scroll-arrow-right {
    right: 0;
}

/* --- UNIFIED TOOLBAR COMPONENTS --- */
.btn-outline, .timeframe-pills {
    height: 38px;
    border-radius: 0;
    border: 1px solid var(--border-primary);
    background: transparent;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.btn-outline {
    padding: 0 16px;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}
.btn-outline:hover {
    border-color: rgba(255, 255, 255, 0.4);
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}
.btn-outline:disabled, .btn-outline.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    border-color: var(--border-primary);
    color: var(--text-secondary);
    background: transparent;
}

.search-wrapper {
    padding: 0 14px;
    gap: 8px;
    background: transparent;
    transition: border-color 0.2s ease;
}






.timeframe-pills {
    padding: 3px;
    gap: 2px;
}
.timeframe-pills .pill {
    height: 100%;
    padding: 0 14px;
    border-radius: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.timeframe-pills .pill:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}
.timeframe-pills .pill.active {
    background: var(--accent);
    color: #ffffff;
    box-shadow: none;
}

.search-wrapper {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    gap: 8px;
    transition: all var(--transition-fast);
}
.search-wrapper:focus-within {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}
.search-wrapper input {
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.8125rem;
    width: 140px;
    outline: none;
}
.search-wrapper input::placeholder {
    color: var(--text-tertiary);
}
.search-icon {
    color: var(--text-tertiary);
}

/* ==========================================================================
   TABLE SCROLLBAR & SCROLL ARROWS
   ========================================================================== */

/* Custom Table Scrollbar */
.table-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.table-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin: 0 32px; /* Leaves space on left & right for the arrows */
}
.table-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}
.table-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}
.table-scroll::-webkit-scrollbar-corner {
    background: transparent;
}

/* Global scrollbar size tweak */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/* Scroll Arrows Wrapper & Buttons */
.scroll-arrow {
    position: absolute;
    bottom: -2px; /* Positioned exactly at the scrollbar line */
    z-index: 20;
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary);
    border-radius: 4px;
    width: 28px;
    height: 14px; /* Taller than scrollbar to make it clickable */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.8);
    padding: 0;
}
.scroll-arrow:hover {
    color: var(--text-primary);
    background: #222222;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}
.scroll-arrow svg {
    width: 10px;
    height: 10px;
}
.scroll-arrow-left {
    left: 0;
}
.scroll-arrow-right {
    right: 0;
}

/* --- STRATEGY PAGE HISTORICAL CHART --- */
.strategy-chart-section {
    margin-top: 32px;
    padding: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: var(--shadow-md);
}

.strategy-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.strategy-chart-header h3 {
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.strategy-chart-container {
    height: 280px;
    position: relative;
    width: 100%;
}

.strategy-chart-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.strategy-chart-stat-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    transition: all var(--transition-fast);
}

.strategy-chart-stat-card:hover {
    border-color: var(--border-primary);
    background: var(--bg-hover);
}

.strategy-chart-stat-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.strategy-chart-stat-value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.strategy-chart-tf-btn {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-sans);
}

.strategy-chart-tf-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.strategy-chart-tf-btn.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}

@media (max-width: 640px) {
    .strategy-chart-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Premium Reversals Highlight Toggled Active Glow State */
.strategy-chart-stat-card.active-glow {
    border-color: var(--accent) !important;
    background: rgba(236, 48, 19, 0.08) !important;
    box-shadow: 0 0 20px rgba(236, 48, 19, 0.25), inset 0 0 12px rgba(236, 48, 19, 0.05) !important;
    transform: translateY(-2px) scale(1.02);
}

.strategy-chart-stat-card.active-glow:hover {
    box-shadow: 0 0 25px rgba(236, 48, 19, 0.35), inset 0 0 12px rgba(236, 48, 19, 0.08) !important;
}

.strategy-chart-stat-card.active-glow .strategy-chart-stat-label {
    color: var(--accent) !important;
    font-weight: 700;
}

.strategy-chart-stat-card.active-glow .strategy-chart-stat-value {
    color: #ffffff !important;
    text-shadow: none;
}

/* Active select exchange button inside strategy cards */
.strategy-exchange-select-btn {
    width: 100%;
    height: 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    color: var(--text-normal);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    opacity: 1;
    transition: all var(--transition-fast);
    margin-top: 14px;
    padding-top: 1px;
}

.strategy-exchange-select-btn svg {
    color: var(--text-tertiary);
    opacity: 0.7;
    transition: all var(--transition-fast);
}

.strategy-exchange-select-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.strategy-exchange-select-btn:hover svg {
    color: #ffffff;
    opacity: 1;
    transform: translateY(1px);
}

.strategy-exchange-select-wrapper {
    position: relative;
    width: 100%;
}

.strategy-exchange-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: rgba(18, 18, 18, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    padding: 6px 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.strategy-exchange-dropdown.hidden {
    display: none;
}

.strategy-exchange-dropdown::-webkit-scrollbar {
    width: 6px;
}

.strategy-exchange-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.strategy-exchange-dropdown::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
}

.strategy-exchange-dropdown::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

.strategy-exchange-dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s ease;
}

.strategy-exchange-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-normal);
}

.strategy-exchange-dropdown-item.empty {
    color: var(--text-tertiary);
    font-style: italic;
    cursor: default;
    justify-content: center;
    padding: 12px;
}

.strategy-exchange-dropdown-item .ex-name {
    font-family: var(--font-sans);
}

.strategy-exchange-dropdown-item .ex-delta {
    font-family: var(--font-mono), monospace;
    font-weight: 600;
    font-size: 0.74rem;
    padding: 2px 6px;
    border-radius: 4px;
}

.strategy-exchange-dropdown-item .ex-delta.delta-plus {
    color: var(--positive);
    background: rgba(87, 192, 143, 0.06);
}

.strategy-exchange-dropdown-item .ex-delta.delta-minus {
    color: var(--negative);
    background: rgba(255, 79, 100, 0.06);
}

.strategy-exchange-dropdown-item .ex-delta.delta-zero {
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.03);
}


/* Center VS APR card container */
.strategy-vs-apr-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 100px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.strategy-vs-apr-label {
    font-size: 0.62rem;
    color: var(--text-tertiary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.strategy-vs-apr-val {
    font-size: 1.1rem;
    font-weight: 800;
    font-family: var(--font-mono), monospace;
    text-align: center;
    transition: all 0.2s ease;
}

/* Custom tooltip for payback on APR card hover */
.strategy-apr-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 10px) scale(0.95);
    background: rgba(22, 22, 22, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 110px;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    backdrop-filter: blur(10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.strategy-apr-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(22, 22, 22, 0.95) transparent transparent transparent;
}

.strategy-vs-apr-card:hover .strategy-apr-tooltip {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

/* Bottom-aligned tooltip */
.strategy-apr-tooltip.tooltip-bottom {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translate(-50%, -10px) scale(0.95);
}

.strategy-apr-tooltip.tooltip-bottom::after {
    top: auto;
    bottom: 100%;
    border-color: transparent transparent rgba(22, 22, 22, 0.95) transparent;
}

.strategy-vs-apr-card:hover .strategy-apr-tooltip.tooltip-bottom {
    transform: translate(-50%, 0) scale(1);
}

.strategy-apr-tooltip-label {
    font-size: 0.58rem;
    color: var(--text-tertiary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.strategy-apr-tooltip-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-mono), monospace;
}

/* ============================================
   BACKTEST OVERLAY
   ============================================ */
.backtest-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    animation: fadeIn 0.2s ease;
    overflow-y: auto;
    padding: 30px 20px;
}

.backtest-page {
    width: 100%;
    max-width: 78rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg), 0 0 80px rgba(236, 48, 19, 0.08);
    animation: modalSlide 0.3s ease;
    overflow: hidden;
}

.backtest-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-primary);
    background: rgba(26, 26, 40, 0.6);
    flex-wrap: wrap;
}

.backtest-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.backtest-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    flex-wrap: wrap;
}

.backtest-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.backtest-input-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.backtest-input-wrap {
    display: flex;
    align-items: center;
    gap: 2px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    height: 34px;
    transition: border-color 0.2s;
}

.backtest-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}

.backtest-input-prefix,
.backtest-input-suffix {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
}

.backtest-input-wrap input {
    width: 70px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: right;
}

.backtest-input-wrap input::-webkit-inner-spin-button,
.backtest-input-wrap input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.backtest-input-wrap input[type=number] {
    -moz-appearance: textfield;
}

.backtest-tf-selector {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-primary);
    border-radius: 0;
    padding: 3px;
}

.backtest-tf-btn {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-tertiary);
    font-size: 0.7rem;
    font-weight: 700;
    font-family: var(--font-sans);
    padding: 5px 12px;
    border-radius: 0;
    cursor: pointer;
    transition: all 150ms ease;
    letter-spacing: 0.04em;
}

.backtest-tf-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.06);
}

.backtest-tf-btn:hover:not(.active) {
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
}

.backtest-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Stats Grid */
.backtest-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.backtest-stat-card {
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: border-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.backtest-stat-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.backtest-stat-primary {
    grid-row: span 2;
    justify-content: space-between;
    background: linear-gradient(160deg, rgba(87, 192, 143, 0.04), rgba(87, 192, 143, 0.01));
    border-color: rgba(87, 192, 143, 0.15);
}

.backtest-stat-primary .backtest-stat-value {
    font-size: 1.8rem;
    color: var(--positive);
    text-shadow: none;
}

.backtest-stat-primary.negative {
    background: linear-gradient(160deg, rgba(255, 79, 100, 0.04), rgba(255, 79, 100, 0.01));
    border-color: rgba(255, 79, 100, 0.15);
}

.backtest-stat-primary.negative .backtest-stat-value {
    color: var(--negative);
    text-shadow: none;
}

.backtest-stat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.backtest-stat-icon {
    font-size: 0.85rem;
}

.backtest-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.backtest-stat-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* Backtest metrics use the project's primary Archivo face; tabular figures
   retain stable widths without switching the cards to the mono register. */
#backtest-overlay .backtest-stats-grid,
#backtest-overlay .backtest-stat-header,
#backtest-overlay .backtest-stat-value,
#backtest-overlay .backtest-stat-sub {
    font-family: var(--font-sans) !important;
}

#backtest-overlay .backtest-stat-value,
#backtest-overlay .backtest-stat-sub {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* Chart Sections */
.backtest-chart-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: var(--shadow-md);
}

.backtest-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.backtest-chart-header h3 {
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.backtest-legend {
    display: flex;
    align-items: center;
    gap: 14px;
}

.backtest-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-tertiary);
}

.backtest-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.backtest-chart-container {
    height: 280px;
    position: relative;
}

.backtest-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
}

.backtest-pnl-heading {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.backtest-chart-context {
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.67rem;
    font-weight: 560;
    letter-spacing: 0.01em;
}

.backtest-pnl-chart-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.backtest-chart-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 1px dashed var(--border-primary);
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.02em;
}

.backtest-chart-empty.hidden {
    display: none;
}

/* Loading state */
.backtest-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .backtest-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .backtest-stat-primary {
        grid-column: span 2;
        grid-row: span 1;
    }
    .backtest-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .backtest-controls {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .backtest-stats-grid {
        grid-template-columns: 1fr;
    }
    .backtest-stat-primary {
        grid-column: span 1;
    }
}

/* ============================================
   TELEGRAM NOTIFICATIONS MODAL
   ============================================ */
.notif-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    font-size: 0.8125rem;
    color: var(--text-normal);
    transition: background 0.2s, border-color 0.2s;
}
.notif-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
.notif-item-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.notif-item-pair {
    font-weight: 700;
    color: var(--text-primary);
}
.notif-item-exchanges {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.notif-item-size {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--text-normal);
    width: fit-content;
}
.notif-item-delete {
    background: transparent;
    border: none;
    color: #ff7675;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}
.notif-item-delete:hover {
    background: rgba(255, 118, 117, 0.1);
}

/* Fix option text color being white on white in system dropdowns */
#notifications-modal select option {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
}


/* ======== PRICE ARBITRAGE PAGE ======== */
.price-arb-page {
    padding: 0;
}



/* --- Price Arbitrage Detail Modal --- */
.pa-detail-modal {
    width: 95%;
    max-width: 1400px;
    max-height: 90vh;
    background: #0d0d0f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #e2e2e8;
}

.pa-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: rgba(18, 18, 22, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pa-modal-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pa-modal-leg-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.pa-modal-leg-indicator.long { color: #57c08f; }
.pa-modal-leg-indicator.short { color: #FF4F64; }

.pa-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}
.pa-dot.long { background: #57c08f; box-shadow: 0 0 6px rgba(87, 192, 143, 0.4); }
.pa-dot.short { background: #FF4F64; box-shadow: 0 0 6px rgba(255, 79, 100, 0.4); }

.pa-modal-exchange-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    font-size: 0.85rem;
    font-weight: 600;
}

.pa-tag-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
}

.pa-tag-symbol {
    color: rgba(255, 255, 255, 0.5);
    font-family: var(--font-mono);
    font-size: 0.8rem;
}

.pa-modal-vs {
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.1rem;
}

.pa-modal-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pa-modal-body {
    display: flex;
    flex: 1;
    overflow-y: auto;
    gap: 20px;
    padding: 20px 24px;
}

.pa-modal-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.pa-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pa-entry-exit {
    display: flex;
    gap: 16px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.5);
}

.pa-pos { color: #57c08f !important; }
.pa-neg { color: #FF4F64 !important; }

.pa-chart-container {
    flex: 1;
    min-height: 480px;
    position: relative;
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    padding: 12px;
}

/* Stat Cards below chart matching screenshot 2 */
.pa-stats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.pa-stat-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 12px 14px;
    text-align: center;
}

.pa-stat-lbl {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.pa-stat-val {
    font-size: 1.05rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: #ffffff;
}

/* Sidebar */
.pa-modal-sidebar {
    width: 320px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pa-ex-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
    padding: 16px;
}

.pa-ex-card.long { border-left: 3px solid #57c08f; }
.pa-ex-card.short { border-left: 3px solid #FF4F64; }

.pa-ex-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.pa-ex-title {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

.pa-ex-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}
.pa-ex-badge.long { background: rgba(87, 192, 143, 0.15); color: #57c08f; }
.pa-ex-badge.short { background: rgba(255, 79, 100, 0.15); color: #FF4F64; }

.pa-ex-symbol {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-mono);
    margin-bottom: 12px;
}

.pa-ex-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pa-ex-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
}

.pa-ex-label {
    color: rgba(255, 255, 255, 0.45);
}

.pa-ex-val {
    font-family: var(--font-mono);
    font-weight: 600;
    color: #e2e2e8;
}

@media (max-width: 900px) {
    .pa-modal-body {
        flex-direction: column;
    }
    .pa-modal-sidebar {
        width: 100%;
    }
    .pa-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}



/* ============================================
   LANDING PAGE — Lachuga-Inspired Pixel × Funding Arbitrage
   All styles scoped under .ldg-page
   ============================================ */

.ldg-page {
    --font-pixel: 'Pixelify Sans', monospace;
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Lachuga-inspired palette */
    --night: #07010e;
    --night-2: #0f0a1a;
    --bg-dark: #07010e;
    --bg-light: #0f0a1a;
    --bg-card: #16101f;

    --torch: #ff9a44;
    --torch-hot: #ffd24a;
    --gold: #d4a017;
    --gold-light: #ffd700;
    --gold-dim: #8b6914;
    --gold-glow: rgba(255, 215, 0, 0.15);

    --cream: #fff3dc;
    --out: #171026;
    --shadow: rgba(0, 0, 0, 0.55);
    --border-color: var(--out);

    --text-primary: var(--cream);
    --text-secondary: #b8a482;
    --text-muted: #6a5f50;

    --green: #2ecc71;
    --leaf: #2f9e44;
    --red: #c0392b;

    margin: 0;
    padding: 0;
    background: var(--night);
    color: var(--text-secondary);
    font-family: var(--font-sans);
    overflow-x: clip;
}

/* ── Loading Screen (lachuga-style) ── */
.px-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--night);
    display: grid;
    place-items: center;
    transition: opacity 0.3s, visibility 0.3s;
}
.px-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.px-loader__text {
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cream);
    opacity: 0.6;
}

/* ── Scroll Reveal ── */
.px-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
}
.px-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Shooting Coins ── */
.px-shoot {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--torch-hot);
    box-shadow: 0 0 8px var(--torch-hot), 0 0 16px var(--torch);
    opacity: 0;
    z-index: 4;
    pointer-events: none;
    animation: pxShootAnim 8s linear infinite;
}
.px-shoot.s1 { left: 15%; top: 5%; animation-delay: 0s; animation-duration: 5s; }
.px-shoot.s2 { left: 55%; top: 8%; animation-delay: 2s; animation-duration: 7s; }
.px-shoot.s3 { left: 82%; top: 3%; animation-delay: 4s; animation-duration: 6s; }

@keyframes pxShootAnim {
    0% { transform: translate(0, 0) rotate(35deg); opacity: 0; }
    5% { opacity: 1; }
    100% { transform: translate(120px, 80vh) rotate(35deg); opacity: 0; }
}

/* Falling coins (from JS) */
.px-falling-coin {
    position: fixed;
    top: -30px;
    pointer-events: none;
    z-index: 0;
    animation: pxCoinFallAnim linear forwards;
    user-select: none;
}
@keyframes pxCoinFallAnim {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    8% { opacity: 0.6; }
    85% { opacity: 0.6; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

/* ── Moon ── */
.px-moon {
    position: absolute;
    top: 8%;
    right: 12%;
    width: 20px;
    height: 20px;
    background: #e8e0c0;
    opacity: 0.25;
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 0 30px rgba(232, 224, 192, 0.15);
}

/* ── Pixel Birds ── */
.px-bird {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.px-bird .w {
    display: block;
    width: 4px;
    height: 2px;
    background: var(--cream);
    opacity: 0.35;
}
.px-bird .w.l { transform: rotate(-25deg); }
.px-bird .w.r { transform: rotate(25deg); margin-left: -1px; }
.px-bird.f1 { top: 15%; left: 20%; animation: pxBirdFly 12s linear infinite; }
.px-bird.f2 { top: 22%; left: 45%; animation: pxBirdFly 16s linear infinite 3s; }
.px-bird.f3 { top: 12%; left: 70%; animation: pxBirdFly 14s linear infinite 7s; }

@keyframes pxBirdFly {
    0% { transform: translateX(0); }
    50% { transform: translateX(60px) translateY(-10px); }
    100% { transform: translateX(0); }
}

/* ── Clouds ── */
.px-cloud {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}
.px-cloud i {
    position: absolute;
    background: #8888aa;
    opacity: 0.12;
}
.px-cloud.c1 { top: 18%; left: 10%; animation: pxCloudDrift 45s linear infinite; }
.px-cloud.c2 { top: 12%; right: 15%; animation: pxCloudDrift 55s linear infinite reverse; }

@keyframes pxCloudDrift {
    0% { transform: translateX(0); }
    50% { transform: translateX(80px); }
    100% { transform: translateX(0); }
}

/* ── Header / Nav ── */
.px-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    z-index: 100;
    background: rgba(7, 1, 14, 0.88);
    backdrop-filter: blur(10px);
    border-bottom: 4px solid var(--out);
    transition: all 0.15s steps(2);
}
.px-header.scrolled {
    background: rgba(7, 1, 14, 0.98);
    border-bottom-color: var(--torch);
    box-shadow: 0 4px 0 var(--shadow);
}
.px-header__inner {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.px-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.px-logo__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 3px solid var(--out);
    background: var(--cream);
    box-shadow: 2px 2px 0 var(--shadow);
}
.px-logo__icon svg {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
}
.px-logo__text {
    font-family: var(--font-pixel);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--torch-hot);
    text-shadow: none;
    letter-spacing: 0.06em;
}
.px-header__nav {
    display: flex;
    gap: 8px;
}
.px-header__link {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 6px 12px;
    border: 2px solid transparent;
    letter-spacing: 0.04em;
    transition: all 0.12s steps(2);
}
.px-header__link:hover {
    color: var(--torch-hot);
    border-color: var(--out);
    background: rgba(255, 255, 255, 0.02);
}
.px-header__cta {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--out);
    background: var(--torch);
    border: 3px solid var(--out);
    padding: 8px 16px;
    text-decoration: none;
    box-shadow: 3px 3px 0 var(--shadow);
    transition: all 0.08s steps(2);
}
.px-header__cta:hover {
    background: var(--torch-hot);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--shadow);
}

/* ── Reusable Pixel Buttons ── */
.px-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.85rem;
    text-decoration: none;
    padding: 12px 24px;
    border: 4px solid var(--out);
    box-shadow: 5px 5px 0 var(--shadow);
    cursor: pointer;
    transition: transform 0.08s steps(2), box-shadow 0.08s steps(2), background 0.08s steps(2);
}
.px-btn--torch {
    background: var(--torch);
    color: var(--out);
    border-color: var(--out);
}
.px-btn--torch:hover {
    background: var(--torch-hot);
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--shadow), 0 0 24px rgba(255, 154, 68, 0.3);
}
.px-btn--ghost {
    background: var(--night-2);
    color: var(--cream);
    border-color: var(--out);
}
.px-btn--ghost:hover {
    color: var(--torch-hot);
    background: rgba(255, 154, 68, 0.08);
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--shadow);
}
.px-btn--lg {
    padding: 16px 32px;
    font-size: 1rem;
}

/* ── Hero Section ── */
.px-hero {
    position: relative;
    padding: 140px 0 80px;
    background: var(--night);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: 4px solid var(--out);
    overflow: hidden;
}
.px-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.px-stars i {
    position: absolute;
    background: var(--cream);
    border-radius: 0;
    animation: pxPulseStar 3s infinite ease-in-out;
}
@keyframes pxPulseStar {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.9; }
}
.hero-scene {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 45%;
    z-index: 2;
    pointer-events: none;
}
.px-hero__content {
    position: relative;
    z-index: 5;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}
.px-hero__kick {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--out);
    background: var(--torch);
    border: 3px solid var(--out);
    padding: 7px 14px;
    margin-bottom: 24px;
    box-shadow: 3px 3px 0 var(--shadow);
}
.px-kick-dot {
    width: 10px;
    height: 10px;
    background: var(--leaf);
    border: 2px solid var(--out);
    animation: pxDotPulse 1.9s ease-in-out infinite;
}
@keyframes pxDotPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.6); opacity: 0.4; }
}
.px-hero__title {
    font-family: var(--font-pixel);
    font-size: clamp(1.6rem, 5vw, 2.8rem);
    font-weight: 600;
    color: var(--cream);
    line-height: 1.1;
    margin: 0 0 20px;
    text-shadow: none;
}
.px-hero__title .hl {
    color: var(--torch);
}
.px-hero__lead {
    font-size: clamp(0.88rem, 2vw, 1.05rem);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.px-hero__cta {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}
.px-hero__stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    border-top: 3px dashed rgba(255, 243, 220, 0.16);
    padding-top: 32px;
}
.px-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.px-stat b {
    font-family: var(--font-pixel);
    font-size: 1.3rem;
    color: var(--torch-hot);
    text-shadow: none;
}
.px-stat span {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.px-stat-sep {
    color: rgba(255, 243, 220, 0.2);
    font-family: var(--font-pixel);
    font-size: 0.6rem;
}

/* ── Scrolling Ticker ── */
.px-ticker {
    background: var(--night-2);
    border-bottom: 4px solid var(--out);
    padding: 12px 0;
    overflow: hidden;
    white-space: nowrap;
}
.px-ticker__track {
    display: inline-flex;
    gap: 40px;
    animation: pxTickerScroll 25s linear infinite;
}
@keyframes pxTickerScroll {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}
.px-ticker__item {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.04em;
}
.px-ticker__item em {
    font-style: normal;
    color: var(--leaf);
    font-weight: 700;
}

/* ── Sections Common Styles ── */
.px-section {
    padding: 90px 0;
    border-bottom: 4px solid var(--out);
    background: var(--night);
}
.px-section--alt {
    background: var(--night-2);
}
.px-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}
.px-section__kick {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--torch);
    margin-bottom: 12px;
}
.px-section__h {
    font-family: var(--font-pixel);
    font-size: clamp(1.3rem, 3.5vw, 2rem);
    font-weight: 600;
    color: var(--cream);
    text-shadow: none;
    margin-bottom: 48px;
    line-height: 1.1;
}

/* ── How It Works (Steps Path) ── */
.px-steps {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 16px;
}
.px-step {
    flex: 1;
    max-width: 320px;
    background: var(--night);
    border: 4px solid var(--out);
    padding: 28px 20px;
    box-shadow: 5px 5px 0 var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    transition: transform 0.08s steps(2), box-shadow 0.08s steps(2), border-color 0.08s steps(2);
}
.px-step:hover {
    border-color: var(--torch);
    transform: translate(-3px, -3px);
    box-shadow: 8px 8px 0 var(--shadow), 0 0 20px rgba(255, 154, 68, 0.1);
}
.px-step__num {
    font-family: var(--font-pixel);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--torch);
    line-height: 1;
}
.px-step__ic {
    font-size: 2.2rem;
}
.px-step__title {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.9rem;
    color: var(--cream);
}
.px-step__text {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.55;
}
.px-step-arrow {
    font-family: var(--font-pixel);
    font-size: 1.8rem;
    color: var(--torch);
    display: flex;
    align-items: center;
    animation: pxArrowMove 1.5s infinite steps(4);
}
@keyframes pxArrowMove {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

/* ── Scanner Preview Table ── */
.px-scanner-grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 28px;
    text-align: left;
}
.px-panel {
    background: linear-gradient(180deg, rgba(255, 154, 68, 0.06), transparent 40%), var(--night-2);
    border: 4px solid var(--out);
    box-shadow: 6px 6px 0 var(--shadow);
    overflow: hidden;
}
.px-panel__head {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 4px solid var(--out);
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    color: var(--torch);
}
.px-live {
    color: var(--leaf);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
}
.px-panel__table {
    display: flex;
    flex-direction: column;
}
.px-row {
    display: grid;
    grid-template-columns: 1.2fr 1.8fr 1.8fr 1.2fr 1fr;
    padding: 12px 18px;
    border-bottom: 2px solid rgba(23, 16, 38, 0.5);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
    transition: background-color 0.15s steps(2);
}
.px-row--hdr {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.25);
    border-bottom-width: 3px;
    border-bottom-color: var(--out);
    color: var(--text-muted);
}
.px-row:not(.px-row--hdr):hover {
    background: rgba(255, 154, 68, 0.04);
}
.px-row.px-row--flash {
    background: rgba(255, 215, 0, 0.1);
    animation: pxFlashAnim 0.8s steps(4) forwards;
}
@keyframes pxFlashAnim {
    0%, 100% { background: rgba(255, 215, 0, 0); }
    50% { background: rgba(255, 215, 0, 0.12); }
}
.px-tk {
    font-weight: 700;
    color: var(--cream);
}
.c-red { color: var(--red); }
.c-green { color: var(--leaf); }
.c-gold { color: var(--torch-hot); }
.c-b { font-weight: 700; }

.px-panel__foot {
    background: rgba(0, 0, 0, 0.25);
    border-top: 3px solid var(--out);
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.68rem;
    color: var(--text-muted);
}
.px-panel__open {
    color: var(--torch);
    text-decoration: none;
    font-weight: 700;
}
.px-panel__open:hover {
    color: var(--torch-hot);
    text-decoration: underline;
}

.px-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.px-feat {
    background: var(--night-2);
    border: 4px solid var(--out);
    padding: 16px;
    box-shadow: 4px 4px 0 var(--shadow);
    display: flex;
    gap: 14px;
    align-items: flex-start;
    text-align: left;
    transition: transform 0.08s steps(2), box-shadow 0.08s steps(2);
}
.px-feat:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 var(--shadow);
}
.px-feat__ic {
    font-size: 1.6rem;
    flex: 0 0 auto;
}
.px-feat b {
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 0.82rem;
    color: var(--cream);
    margin-bottom: 4px;
    display: block;
}
.px-feat div {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* ── Guilds Grid ── */
.px-guilds {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.px-guild-group {
    text-align: left;
}
.px-guild-label {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--torch);
    margin-bottom: 16px;
}
.px-guild-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.px-guild-card {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.78rem;
    color: var(--cream);
    background: var(--night);
    border: 3px solid var(--out);
    padding: 12px 20px;
    box-shadow: 3px 3px 0 var(--shadow);
    transition: transform 0.08s steps(2), box-shadow 0.08s steps(2), border-color 0.08s steps(2);
}
.px-guild-card:hover {
    border-color: var(--torch);
    color: var(--torch-hot);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--shadow);
}

/* ── Calculator Section ── */
.px-vault {
    max-width: 600px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(255, 154, 68, 0.06), transparent 50%), var(--night-2);
    border: 4px solid var(--out);
    padding: 32px;
    box-shadow: 6px 6px 0 var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.px-vault__inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.px-vault__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}
.px-vault__label {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.px-vault__inp-wrap {
    display: flex;
    align-items: center;
    background: var(--night);
    border: 3px solid var(--out);
    height: 48px;
    padding: 0 12px;
    gap: 8px;
    transition: border-color 0.1s;
}
.px-vault__inp-wrap:focus-within {
    border-color: var(--torch);
}
.px-vault__affix {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
}
.px-vault__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: 0.88rem;
    font-weight: 500;
    width: 100%;
}
.px-vault__periods {
    display: flex;
    gap: 8px;
}
.px-vault__period {
    flex: 1;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--cream);
    background: var(--night);
    border: 3px solid var(--out);
    padding: 10px 0;
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--shadow);
    transition: transform 0.08s steps(2), box-shadow 0.08s steps(2), background 0.08s steps(2);
}
.px-vault__period:hover {
    border-color: var(--torch);
    color: var(--torch-hot);
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--shadow);
}
.px-vault__period.active {
    background: var(--torch);
    color: var(--out);
    border-color: var(--out);
}
.px-vault__result {
    border-top: 3px dashed rgba(255, 243, 220, 0.16);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.px-vault__coins {
    font-size: 1.5rem;
    margin-bottom: 4px;
    animation: pxCoinBounce 1.5s infinite steps(2);
}
@keyframes pxCoinBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.px-vault__val {
    font-family: var(--font-pixel);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--torch-hot);
    text-shadow: none;
}
.px-vault__val.fx-pop {
    animation: pxPopEffect 0.45s steps(3);
}
@keyframes pxPopEffect {
    0% { transform: scale(1); }
    40% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.px-vault__per {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.px-vault__apr {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ── Final CTA ── */
.px-cta {
    padding: 100px 0;
    background: var(--night);
    border-bottom: 4px solid var(--out);
}
.px-cta__box {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
.px-cta__emblem {
    font-size: 3rem;
    margin-bottom: 16px;
    display: inline-block;
    transform-origin: 50% 80%;
    animation: pxFlick 1.3s ease-in-out infinite;
}
@keyframes pxFlick {
    0%, 100% { transform: scale(1) rotate(-5deg); }
    50% { transform: scale(1.18) rotate(5deg); }
}
.px-cta__title {
    font-family: var(--font-pixel);
    font-size: clamp(1.3rem, 3.5vw, 2rem);
    font-weight: 600;
    color: var(--cream);
    text-shadow: none;
    margin-bottom: 16px;
    line-height: 1.15;
}
.px-cta__sub {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

/* ── Footer ── */
.px-footer {
    background: var(--night);
    border-top: 4px solid rgba(255, 243, 220, 0.14);
    padding: 40px 24px;
}
.px-footer .px-wrap {
    text-align: left;
}
.px-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 20px;
}
.px-footer__links a {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-secondary);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.px-footer__links a:hover {
    opacity: 1;
    color: var(--torch);
}
.px-footer__disclaimer {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.5;
    color: var(--text-secondary);
    opacity: 0.45;
    max-width: 700px;
    margin-bottom: 16px;
}
.px-footer__copy {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.5;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .px-header__nav { display: none; }
    .px-hero { padding: 120px 0 60px; min-height: auto; }
    .px-hero__stats { flex-wrap: wrap; gap: 12px; }
    .px-stat-sep { display: none; }
    .px-steps { flex-direction: column; align-items: center; }
    .px-step-arrow { transform: rotate(90deg); }
    .px-scanner-grid { grid-template-columns: 1fr; }
    .px-vault__inputs { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .px-hero__title { font-size: 1.3rem; }
    .px-hero__cta { flex-direction: column; align-items: center; }
    .px-btn--lg { padding: 14px 28px; font-size: 0.88rem; }
    .px-row { grid-template-columns: 1fr 1fr 1fr; font-size: 0.65rem; padding: 10px 12px; }
    .px-row > span:nth-child(4),
    .px-row > span:nth-child(5) { display: none; }
    .px-row--hdr > span:nth-child(4),
    .px-row--hdr > span:nth-child(5) { display: none; }
    .px-vault__periods { flex-wrap: wrap; }
    .px-vault__period { flex: 1 1 45%; }
    .px-guild-list { gap: 8px; }
    .px-guild-card { padding: 10px 14px; font-size: 0.72rem; }
}


.ticker-realized-avg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    font-size: 0.7rem;
    font-family: var(--font-mono);
    color: rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.65);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    white-space: nowrap;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: all 200ms ease;
}

.ticker-card:hover .ticker-realized-avg {
    color: rgba(255, 255, 255, 0.7);
    background: rgba(0, 0, 0, 0.75);
    border-color: rgba(255, 255, 255, 0.15);
}

/* Compact Difference Card States */
.strategy-vs-diff-card {
    transition: all 0.2s ease;
}

.strategy-vs-diff-card.profitable {
    border-color: rgba(87, 192, 143, 0.35) !important;
    box-shadow: 0 4px 12px rgba(87, 192, 143, 0.05);
}

.strategy-vs-diff-card.costly {
    border-color: rgba(255, 79, 100, 0.25) !important;
    box-shadow: 0 4px 12px rgba(255, 79, 100, 0.02);
}

.strategy-vs-diff-card .strategy-vs-apr-val.profitable {
    color: var(--positive) !important;
    text-shadow: none;
}

.strategy-vs-diff-card .strategy-vs-apr-val.costly {
    color: var(--negative) !important;
    text-shadow: none;
}

.strategy-vs-diff-sub {
    font-size: 0.55rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    margin-top: 1px;
}

.strategy-vs-diff-sub.profitable {
    color: var(--positive) !important;
}

.strategy-vs-diff-sub.costly {
    color: var(--negative) !important;
}

/* Detailed Stats Badge */
.detailed-stats-badge {
    color: var(--positive);
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(87, 192, 143, 0.06);
    border: 1px solid rgba(87, 192, 143, 0.15);
    transition: all 0.2s ease;
    user-select: none;
}

.detailed-stats-badge:hover {
    background: rgba(87, 192, 143, 0.12);
    border-color: rgba(87, 192, 143, 0.3);
    transform: translateY(-0.5px);
    box-shadow: 0 2px 8px rgba(87, 192, 143, 0.1);
}

/* Backtest logo circle style */
.backtest-logo-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    flex-shrink: 0;
    line-height: 1;
}

/* Active state for strategy-exchange-dropdown-item */
.strategy-exchange-dropdown-item.active {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    font-weight: bold;
}

.backtest-ex-tf-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 4px;
    transition: all var(--transition-fast);
}
.backtest-ex-tf-btn:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
}
.backtest-ex-tf-btn.active {
    background: rgba(236, 48, 19, 0.18) !important;
    color: var(--accent) !important;
}

.modal-ex-link {
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-fast) ease;
}
.modal-ex-link:hover {
    color: var(--positive);
}

/* ============================================
   EXCHANGES DASHBOARD VIEW ("Обзор бирж")
   ============================================ */
.ex-dash-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 16px;
}
.ex-dash-title {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--text-primary);
    text-transform: uppercase;
}
.ex-dash-subtitle {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.08em;
}

/* 3 Cards Grid */
.ex-dash-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 900px) {
    .ex-dash-cards-grid {
        grid-template-columns: 1fr;
    }
}
.ex-dash-card {
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 160px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.ex-dash-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}
.ex-card-label {
    position: relative;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ex-card-value {
    position: relative;
    z-index: 1;
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #ffffff;
    margin: 8px 0 0 0;
    letter-spacing: -0.02em;
}
.ex-card-sub {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}
.ex-card-chart {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 70px;
    pointer-events: auto;
    opacity: 0.85;
    z-index: 2;
}
.sparkline-svg {
    width: 100%;
    height: 100%;
}

/* Stats Bar */
.ex-dash-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}
@media (max-width: 800px) {
    .ex-dash-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}
.stat-pill {
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.stat-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
}
.stat-val {
    font-size: 1.15rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: #ffffff;
}
.stat-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.45);
}
.stat-tag {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}
.stat-tag.online {
    background: rgba(87, 192, 143, 0.15);
    color: #57c08f;
    border: 1px solid rgba(87, 192, 143, 0.3);
}

/* Section Header */
.ex-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}
.ex-section-title {
    font-size: 1.35rem;
    font-weight: 800;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 10px;
}
.beta-badge {
    font-size: 0.65rem;
    font-weight: 800;
    background: rgba(247, 166, 0, 0.2);
    color: #F7A600;
    border: 1px solid rgba(247, 166, 0, 0.4);
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    vertical-align: middle;
}
.ex-section-sub {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 4px;
    max-width: 800px;
}
.ex-campaign-filters {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pulse-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #57c08f;
    margin-right: 4px;
    box-shadow: 0 0 8px #57c08f;
    animation: pulseGlow 1.5s infinite alternate;
}
@keyframes pulseGlow {
    0% { opacity: 0.4; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.2); }
}

/* Platform Cards Grid */
.ex-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 1200px) { .ex-cards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .ex-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .ex-cards-grid { grid-template-columns: 1fr; } }

.ex-platform-card {
    background: #0d0d0d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: all 0.2s ease;
}
.ex-platform-card:hover {
    border-color: rgba(87, 192, 143, 0.4);
    box-shadow: 0 6px 20px rgba(87, 192, 143, 0.08);
    transform: translateY(-2px);
}
.ex-platform-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.ex-platform-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ex-platform-logo {
    width: 32px;
    height: 32px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    color: #ffffff;
    flex-shrink: 0;
}
.ex-platform-name {
    font-size: 1.05rem;
    font-weight: 800;
    color: #ffffff;
}
.ex-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
}
.ex-badge.dex {
    background: rgba(87, 192, 143, 0.12);
    color: #57c08f;
}
.ex-badge.cex {
    background: rgba(247, 166, 0, 0.12);
    color: #F7A600;
}

.ex-campaign-tag {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    width: fit-content;
}
.ex-campaign-tag.active-points {
    background: rgba(87, 192, 143, 0.15);
    color: #57c08f;
    border: 1px solid rgba(87, 192, 143, 0.3);
}
.ex-campaign-tag.not-active {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.4);
}

.ex-highlights {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
    margin-bottom: 14px;
    flex-grow: 1;
}

.ex-fee-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    padding: 8px 12px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}
.ex-fee-item {
    display: flex;
    flex-direction: column;
}
.ex-fee-label {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.68rem;
}
.ex-fee-val {
    color: #ffffff;
    font-family: var(--font-mono);
    font-weight: 700;
    margin-top: 2px;
}

.ex-action-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 0.2s ease;
}
.ex-action-btn:hover {
    background: #57c08f;
    color: #000000;
    border-color: #57c08f;
}

/* Table sorting headers */
.ex-th-sort {
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}
.ex-th-sort:hover {
    color: #ffffff;
}

.token-tag {
    font-size: 0.72rem;
    font-family: var(--font-mono);
    font-weight: 700;
    color: #F7A600;
    background: rgba(247, 166, 0, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
}

/* ============================================================
   MODERNIST UI ALIGNMENT PASS
   Visual treatment only: layout, controls and interactions stay intact.
   ============================================================ */

:where(button, a, input, select, [role="button"]):focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

.logo-icon,
.live-dot,
.pulse-dot,
.exm-dot,
.pa-dot {
    filter: none !important;
    box-shadow: none !important;
    animation: none !important;
}

.modal-overlay,
.exm-overlay,
.strategy-overlay,
.backtest-overlay {
    background: rgba(7, 7, 7, 0.78);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.modal,
.exm,
.strategy-page,
.backtest-page,
.pa-detail-modal {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}

/* Strategy ticker: compact editorial cards instead of glowing widgets. */
.ticker-card {
    flex: 0 0 244px;
    min-height: 196px;
    height: 196px;
    padding: 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 0;
    box-shadow: none;
    animation: none;
    transform: none;
}

.ticker-card:hover {
    background: var(--bg-elevated);
    border-color: var(--accent);
    box-shadow: none;
    transform: none;
}

.ticker-token {
    color: var(--text-primary);
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.ticker-apr {
    color: var(--positive);
    font-family: var(--font-mono);
    font-size: 1.15rem;
    text-shadow: none !important;
}

.ticker-badge,
.venue-badge,
.ticker-realized-avg {
    border-radius: 0;
    box-shadow: none;
    text-shadow: none;
}

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

.ticker-realized-avg {
    padding: 4px 6px;
    background: rgba(12, 11, 11, 0.86);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.01em;
    backdrop-filter: none;
}

.ticker-chart-box canvas {
    filter: none;
}

.td-rate.highlight-long,
.td-rate.highlight-short {
    border-radius: 0;
    box-shadow: none;
}

.td-rate.highlight-long {
    background: rgba(105, 199, 154, 0.10);
}

.td-rate.highlight-short {
    background: rgba(224, 103, 79, 0.10);
}

/* Exchange picker: flat mechanical controls, no luminous mobile toggles. */
.exm-action-btn,
.exm-action-btn.active,
.exm-row,
.exm-toggle-track {
    border-radius: 0;
    box-shadow: none;
}

.exm-action-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.exm-section-label {
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
}

.exm-row:hover {
    background: var(--bg-elevated);
}

.exm-dot {
    border-radius: 0;
}

.exm-toggle {
    width: 30px;
    height: 18px;
}

.exm-toggle-track {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

.exm-toggle-track::after {
    width: 10px;
    height: 12px;
    top: 2px;
    left: 3px;
    border-radius: 0;
    background: var(--text-muted);
    box-shadow: none;
}

.exm-toggle input:checked + .exm-toggle-track {
    background: var(--accent);
    border-color: var(--accent);
}

.exm-toggle input:checked + .exm-toggle-track::after {
    background: #fff;
    transform: translateX(12px);
    box-shadow: none;
}

/* Detail surfaces keep semantic color as a narrow signal, not decoration. */
.strategy-exchange-card,
.strategy-rate-item,
.strategy-chart-stat-card,
.backtest-stat-card,
.backtest-stat-primary,
.pa-stat-box {
    background: var(--bg-elevated);
    background-image: none;
    border-radius: 0;
    box-shadow: none;
}

.strategy-exchange-card:hover,
.strategy-chart-stat-card:hover,
.strategy-chart-stat-card.active-glow,
.backtest-stat-card:hover,
.strategy-share-btn:hover {
    transform: none;
    box-shadow: none;
}

.strategy-chart-stat-card.active-glow {
    border-color: var(--accent);
}

.strategy-rate-item.is-long {
    border-left: 2px solid var(--positive);
}

.strategy-rate-item.is-short {
    border-left: 2px solid var(--negative);
}

.backtest-header {
    background: var(--bg-panel);
    background-image: none;
}

.backtest-stat-primary {
    border-left: 3px solid var(--positive);
}

.backtest-timeframe-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: none;
}

.pa-dot,
.pulse-dot {
    border-radius: 0;
}

.pa-ex-badge,
.ex-badge,
.ex-campaign-tag {
    border-radius: 0;
    box-shadow: none;
}

/* Markets: neutral labels and explicit, square actions. */
.ex-platform-card,
.ex-platform-card:hover {
    background-image: none;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

.ex-platform-card:hover {
    border-color: var(--accent);
}

.ex-action-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    color: var(--text-primary);
}

.ex-action-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

#exchanges-metrics-table a[style] {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    color: var(--text-primary) !important;
    font-family: var(--font-mono);
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    box-shadow: none !important;
}

#exchanges-metrics-table a[style]:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

.token-tag {
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 0;
    box-shadow: none;
}

.exm-toggle input:checked + .exm-toggle-track {
    box-shadow: none;
}

.beta-badge,
.ex-badge.cex,
.ex-badge.dex {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}

/* ============================================================
   CLAUDE MODERNIST FONT + STRATEGY DETAIL WINDOW
   Presentation only; markup and interaction flow are unchanged.
   ============================================================ */

:root {
    --bg-panel: var(--bg-secondary);
    --border: var(--border-primary);
    --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-primary: var(--font-sans);
    --font-pixel: var(--font-sans);
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-sans);
}

/* Funding spread detail: a contained working window, not a full-screen page. */
#strategy-overlay.strategy-overlay {
    padding: 24px;
    align-items: center;
    overflow: hidden;
    background: rgba(4, 4, 4, 0.86);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

#strategy-overlay > #strategy-page {
    width: min(1180px, calc(100vw - 48px));
    max-width: 1180px;
    max-height: calc(100dvh - 48px);
    background: #11100f;
    border: 1px solid var(--border-primary);
    border-top: 2px solid var(--accent);
    border-radius: 0;
    box-shadow: none;
    overflow-x: clip;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border-primary) transparent;
}

#strategy-overlay > #strategy-page::-webkit-scrollbar {
    width: 6px;
}

#strategy-overlay > #strategy-page::-webkit-scrollbar-track {
    background: transparent;
}

#strategy-overlay > #strategy-page::-webkit-scrollbar-thumb {
    background: var(--border-primary);
}

#strategy-overlay .strategy-header {
    min-height: 56px;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-primary);
}

#strategy-overlay .strategy-title {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

#strategy-overlay .strategy-back,
#strategy-overlay .strategy-backtest-btn,
#strategy-overlay .strategy-share-btn {
    min-height: 34px;
    border-radius: 0 !important;
    background: transparent !important;
    border-color: var(--border-primary) !important;
    box-shadow: none !important;
    font-family: var(--font-sans) !important;
    text-transform: none;
}

#strategy-overlay .strategy-back:hover,
#strategy-overlay .strategy-backtest-btn:hover:not(:disabled),
#strategy-overlay .strategy-share-btn:hover:not(:disabled) {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}

#strategy-overlay .strategy-body {
    gap: 16px;
    padding: 16px;
    background: #11100f;
}

#strategy-overlay .strategy-exchanges {
    gap: 0;
}

#strategy-overlay .strategy-exchange-card {
    min-width: 0;
    padding: 16px;
    gap: 8px;
    background: var(--bg-tertiary) !important;
    background-image: none !important;
    border-radius: 0;
    box-shadow: none !important;
}

#strategy-overlay .strategy-long {
    border-color: rgba(105, 199, 154, 0.34) !important;
}

#strategy-overlay .strategy-short {
    border-color: rgba(224, 103, 79, 0.34) !important;
}

#strategy-overlay .strategy-exchange-card::before {
    top: -1px;
    right: auto;
    bottom: -1px;
    left: -1px;
    width: 3px;
    height: auto;
    background: currentColor;
}

#strategy-overlay .strategy-long::before {
    background: var(--positive);
}

#strategy-overlay .strategy-short::before {
    background: var(--negative);
}

#strategy-overlay .strategy-ex-name {
    font-size: 1.12rem;
    letter-spacing: -0.01em;
}

#strategy-overlay .strategy-ex-rate {
    font-size: 1.35rem;
}

#strategy-overlay .strategy-ex-details {
    gap: 4px;
    margin-top: 2px;
    padding-top: 9px;
}

#strategy-overlay .strategy-exchange-select-btn {
    height: 34px;
    margin-top: 8px;
    padding: 0 var(--space-sm);
    background: var(--bg-elevated);
    border-color: var(--border-primary);
    border-radius: 0;
}

#strategy-overlay .strategy-vs {
    flex: 0 0 112px;
    gap: 8px;
    padding: 0 10px;
}

#strategy-overlay .strategy-vs-line {
    height: 28px;
    background: var(--border-primary);
}

#strategy-overlay .strategy-vs-apr-card {
    min-width: 92px;
    padding: 8px 10px;
    gap: 4px;
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    border-radius: 0;
    box-shadow: none;
}

#strategy-overlay .strategy-vs-apr-val {
    font-size: 0.98rem;
}

#strategy-overlay .strategy-apr-tooltip {
    background: var(--bg-elevated);
    border-color: var(--border-primary);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

#strategy-overlay .strategy-chart-section {
    margin-top: 0;
    padding: 16px;
    gap: 12px;
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    border-radius: 0;
    box-shadow: none;
}

#strategy-overlay .strategy-chart-header {
    gap: 12px;
}

#strategy-overlay .strategy-chart-header h3 {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

#strategy-overlay .strategy-chart-container {
    height: 210px;
}

#strategy-overlay .strategy-chart-stats-grid {
    gap: 8px;
    margin-top: 0;
}

#strategy-overlay .strategy-chart-stat-card {
    min-height: 62px;
    padding: 9px 10px;
    gap: 3px;
    background: var(--bg-tertiary);
    border-radius: 0;
    box-shadow: none;
}

#strategy-overlay .strategy-chart-stat-value {
    font-size: 1.05rem;
}

#strategy-overlay .strategy-chart-mode-btn,
#strategy-overlay .strategy-chart-tf-btn {
    border-radius: 0;
    box-shadow: none;
}

#strategy-overlay .strategy-chart-tf-btn.active,
#strategy-overlay .strategy-chart-mode-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: none;
}

@media (max-width: 900px) {
    #strategy-overlay.strategy-overlay {
        align-items: flex-start;
        padding: 12px;
        overflow-y: auto;
    }

    #strategy-overlay > #strategy-page {
        width: 100%;
        max-height: none;
    }

    #strategy-overlay .strategy-vs {
        flex: 0 0 auto;
        flex-direction: row;
        padding: 8px 0;
    }

    #strategy-overlay .strategy-vs-line {
        width: auto;
        height: 1px;
        flex: 1;
    }
}

@media (max-width: 640px) {
    #strategy-overlay .strategy-header {
        align-items: stretch;
    }

    #strategy-overlay .strategy-title {
        flex-basis: calc(100% - 110px);
    }

    #strategy-overlay .strategy-body {
        padding: 10px;
    }

    #strategy-overlay .strategy-chart-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================
   MARKETS — DAILY 03:00 MSK SNAPSHOTS
   ============================================ */
#exchanges-dashboard-page {
    background: #080808;
}

#exchanges-dashboard-page .ex-dashboard-container {
    max-width: 1420px !important;
    padding: 26px 22px 48px !important;
}

#exchanges-dashboard-page .section-header {
    font-family: var(--font-sans) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-secondary) !important;
}

#exchanges-dashboard-page .section-header svg {
    width: 14px;
    height: 14px;
    stroke: var(--accent);
}

#active-campaigns-grid {
    gap: 10px !important;
    padding-bottom: 10px !important;
}

#active-campaigns-grid .campaign-card {
    flex-basis: 296px !important;
    gap: 12px !important;
    padding: 16px !important;
    background: #0c0c0c !important;
    background-image: none !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#active-campaigns-grid .campaign-card:hover {
    border-color: var(--border-primary) !important;
    transform: none !important;
    box-shadow: none !important;
}

.ex-dash-cards-grid {
    gap: 1px;
    margin: 0 0 30px;
    padding: 1px;
    background: var(--border-subtle);
}

.ex-dash-card,
.ex-dash-card:hover {
    min-width: 0;
    min-height: 180px;
    padding: 18px 18px 0;
    background: #0c0c0c;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    transition: background-color 120ms ease;
}

.ex-dash-card:hover {
    background: #0f0f0f;
}

.ex-card-label {
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    color: #777;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ex-card-value {
    margin-top: 9px;
    font-family: var(--font-mono);
    font-size: clamp(1.65rem, 2.2vw, 2rem);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.05em;
    color: #f1f1f1;
    font-variant-numeric: tabular-nums;
}

.ex-card-meta {
    min-height: 13px;
    margin-top: 7px;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #555;
}

.ex-card-change {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.68rem !important;
    font-weight: 650 !important;
    font-variant-numeric: tabular-nums;
}

.ex-card-change.is-positive { color: var(--positive); }

.ex-card-chart.is-pending {
    display: flex;
    align-items: flex-end;
    padding: 0 0 15px 4px;
}

.ex-card-chart.is-pending::after {
    content: attr(data-empty-label);
    font-family: var(--font-sans);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #3f3f3f;
}

.ex-card-chart.is-pending canvas { display: none; }
.ex-card-change.is-negative { color: var(--negative); }
.ex-card-change.is-neutral { color: #555; }

.ex-card-chart {
    position: relative;
    inset: auto;
    z-index: 1;
    width: calc(100% + 8px);
    height: 72px;
    margin: auto -4px 0;
    opacity: 1;
}

.ex-card-chart canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

#exchanges-dashboard-page .table-toolbar {
    margin-bottom: 10px !important;
}

#exchanges-dashboard-page .timeframe-pills,
#exchanges-dashboard-page .pill,
#exchanges-dashboard-page .search-wrapper,
#exchanges-dashboard-page .search-wrapper input,
#exchanges-dashboard-page .table-container {
    border-radius: 0 !important;
    box-shadow: none !important;
}


/* ============================================
   PRIMARY NAV — NUMBERED MODERNIST SEGMENTS
   ============================================ */
#main-header {
    background: rgba(5, 5, 5, 0.96);
    backdrop-filter: blur(10px);
}

.header-container {
    max-width: 1420px;
    padding: 0 22px;
    border-bottom-width: 1px;
}

.header-center {
    min-width: 0;
}

.header-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    width: min(100%, 540px);
    height: 42px;
    align-items: stretch;
    background: #080808;
    border: 1px solid #242424;
}

.header-nav .nav-link {
    position: relative;
    min-width: 0;
    height: 100%;
    border-right: 1px solid #242424;
    outline: none;
    transition: none;
}

.header-nav .nav-link:last-child {
    border-right: 0;
}

.header-nav .nav-icon {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 13px;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: #777;
    font-family: var(--font-sans);
    font-size: 0.73rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.01em;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

.header-nav .nav-icon::before {
    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 0;
    color: #444;
}

#nav-funding-arb .nav-icon::before { content: '01'; }
#nav-calculator .nav-icon::before { content: '02'; }
#nav-exchanges .nav-icon::before { content: '03'; }

.header-nav .nav-link:hover:not(.disabled) .nav-icon {
    background: #111;
    border: 0;
    color: #f0f0f0;
}

.header-nav .nav-link.active .nav-icon {
    background: var(--accent);
    border: 0;
    color: #fff;
    font-weight: 700;
}

.header-nav .nav-link.active .nav-icon::before {
    color: rgba(255, 255, 255, 0.62);
}

.header-nav .nav-link.disabled {
    cursor: not-allowed;
    opacity: 1;
}

.header-nav .nav-link.disabled .nav-icon {
    color: #454545;
}

.header-nav .nav-link.disabled .nav-icon::after {
    content: 'SOON';
    position: absolute;
    top: 5px;
    right: 6px;
    font-family: var(--font-mono);
    font-size: 0.42rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #343434;
}

.header-nav .nav-link:focus-visible .nav-icon {
    outline: 1px solid rgba(255, 255, 255, 0.72);
    outline-offset: -3px;
}

@media (max-width: 980px) {
    .header-nav {
        width: min(100%, 450px);
    }

    .header-nav .nav-icon {
        grid-template-columns: 20px minmax(0, 1fr);
        padding: 0 9px;
        font-size: 0.64rem;
    }
}

@media (max-width: 768px) {
    .header-nav {
        display: none;
    }
}


/* English is the only supported interface language. */
.language-static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 102px;
    height: 42px;
    padding: 0 16px;
    background: #080808;
    border: 1px solid #242424;
    color: #c9c9c9;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0;
}

/* ============================================
   SYSTEM FOOTER — MODERNIST STATUS BAR
   ============================================ */
#main-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    height: var(--footer-height);
    padding: 0 22px;
    background: #070707;
    border-top: 1px solid #242424;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #666;
    font-family: var(--font-sans);
    font-size: 0.66rem;
}

.footer-left,
.footer-center,
.footer-right {
    min-width: 0;
    height: 100%;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 9px;
}

.footer-left::before {
    content: '';
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    background: var(--accent);
}

.footer-brand {
    color: #d7d7d7;
    font-family: var(--font-sans);
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.footer-copy {
    color: #4b4b4b;
    font-family: var(--font-mono);
    font-size: 0.57rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.footer-center {
    display: flex;
    align-items: stretch;
    justify-content: center;
    border-right: 1px solid #242424;
    border-left: 1px solid #242424;
}

.footer-ticker {
    display: grid;
    grid-template-columns: auto 70px;
    align-items: stretch;
    height: 100%;
    color: #777;
}

.footer-ticker-label {
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-family: var(--font-sans);
    font-size: 0.58rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    white-space: nowrap;
}

#funding-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 0 10px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.footer-right {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border-left: 1px solid #242424;
    color: #666;
    font-family: var(--font-sans);
    font-size: 0.59rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 120ms ease, color 120ms ease;
}

.footer-link::after {
    content: none;
    margin-left: 6px;
    color: #3f3f3f;
    font-family: var(--font-mono);
    font-size: 0.58rem;
}

.footer-link:hover {
    background: #111;
    color: #f0f0f0;
}

.footer-link:hover::after {
    color: var(--accent);
}

.footer-link:focus-visible {
    outline: 1px solid rgba(255, 255, 255, 0.72);
    outline-offset: -3px;
}

@media (max-width: 768px) {
    #main-footer {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        height: var(--footer-height);
        padding: 0 12px;
        gap: 0;
        text-align: left;
    }

    #main-content {
        padding-bottom: calc(var(--footer-height) + 20px);
    }

    .footer-ticker-label {
        padding: 0 10px;
        font-size: 0.52rem;
    }

    .footer-link {
        padding: 0 8px;
        font-size: 0.52rem;
    }
}

@media (max-width: 560px) {
    .footer-copy,
    .footer-ticker-label {
        display: none;
    }

    .footer-ticker {
        grid-template-columns: 70px;
    }

    .footer-link {
        padding: 0 6px;
        letter-spacing: 0;
    }
}


/* ============================================
   STRATEGY DETAIL HEADER - EDITORIAL CONTROL BAR
   ============================================ */
#strategy-overlay > #strategy-page {
    position: relative;
    border-top: 1px solid #302d2a;
}


#strategy-overlay .strategy-header {
    min-height: 64px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: stretch;
    gap: 0;
    padding: 0 14px 0 0;
    background: #0e0e0d;
    border-bottom: 1px solid #2a2826;
}

#strategy-overlay .strategy-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 18px;
    overflow: hidden;
    color: #f6f4f1;
    font-family: var(--font-sans);
    font-size: 1.12rem;
    font-weight: 760;
    letter-spacing: -0.025em;
    line-height: 1.05;
    white-space: nowrap;
    text-overflow: ellipsis;
}


#strategy-overlay .strategy-back {
    min-width: 0;
    min-height: 32px;
    width: auto;
    height: 32px;
    align-self: center;
    justify-content: center;
    gap: 8px;
    padding: 0 10px 0 8px;
    margin: 0 0 0 12px;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #9d9791;
    font-family: var(--font-sans) !important;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

#strategy-overlay .strategy-back svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.55;
}

#strategy-overlay .strategy-back:hover {
    background: #171614 !important;
    border-color: #37332f !important;
    color: #f1ede8 !important;
}

#strategy-overlay .strategy-back:focus-visible,
#strategy-overlay .strategy-backtest-btn:focus-visible,
#strategy-overlay .strategy-share-btn:focus-visible,
#strategy-overlay .detailed-stats-badge:focus-visible {
    outline: 1px solid #f4f3f2;
    outline-offset: -3px;
}

#strategy-overlay .strategy-backtest-btn {
    align-self: center;
    min-height: 36px;
    height: 36px;
    gap: 9px;
    padding: 0 14px;
    margin-right: 8px;
    border: 1px solid #3a3531 !important;
    border-left: 2px solid var(--accent) !important;
    background: #151412 !important;
    color: #d7d3cf;
    font-family: var(--font-sans) !important;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

#strategy-overlay .strategy-backtest-btn svg {
    width: 12px;
    height: 12px;
    color: var(--accent);
    stroke-width: 1.8;
}

#strategy-overlay .strategy-backtest-btn:hover:not(:disabled) {
    background: #211b18 !important;
    border-color: #5a4038 !important;
    border-left-color: var(--accent) !important;
    color: #ffffff !important;
}

#strategy-overlay .strategy-backtest-btn:hover:not(:disabled) svg {
    color: #ffffff;
}

#strategy-overlay .strategy-backtest-btn:disabled {
    opacity: 0.38;
}

#strategy-overlay .strategy-share-btn {
    align-self: center;
    min-height: 36px !important;
    height: 36px !important;
    gap: 9px;
    padding: 0 14px !important;
    border: 1px solid #3a3531 !important;
    background: #151412 !important;
    color: #d7d3cf !important;
    font-family: var(--font-sans) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.065em;
    text-transform: uppercase;
    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

#strategy-overlay .strategy-share-btn:hover:not(:disabled) {
    background: #211b18 !important;
    border-color: #5a4038 !important;
    color: #ffffff !important;
}

#strategy-overlay .strategy-share-btn:active:not(:disabled) {
    background: #151412 !important;
    border-color: #3a3531 !important;
}

#strategy-overlay .strategy-all-rates > div:first-child {
    min-height: 36px;
    padding-bottom: 10px;
    border-bottom: 1px solid #292725;
}

#strategy-overlay .detailed-stats-badge {
    min-height: 29px;
    padding: 0 10px;
    gap: 8px;
    border: 1px solid #302e2b;
    border-left: 1px solid var(--border-primary);
    border-radius: 0;
    background: #151412;
    color: #bdb8b2;
    font-family: var(--font-sans);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.105em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: none;
    transform: none;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

#strategy-overlay .detailed-stats-badge::after {
    content: '+';
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

#strategy-overlay .detailed-stats-badge svg {
    width: 11px;
    height: 11px;
    color: #77726d;
    stroke-width: 1.8;
}

#strategy-overlay .detailed-stats-badge:hover {
    border-color: #49443f;
    border-left-color: var(--accent);
    background: #1c1a18;
    color: #f2efec;
    box-shadow: none;
    transform: none;
}

#strategy-overlay .detailed-stats-badge:hover svg {
    color: var(--accent);
}

@media (max-width: 640px) {
    #strategy-overlay .strategy-header {
        grid-template-columns: auto minmax(0, 1fr) auto;
        padding-right: 8px;
    }

    #strategy-overlay .strategy-header > div:last-child {
        display: none !important;
    }

    #strategy-overlay .strategy-back {
        min-width: 34px;
        width: 34px;
        padding: 0;
        margin-left: 8px;
        font-size: 0;
    }

    #strategy-overlay .strategy-title {
        flex-basis: auto;
        padding: 0 12px;
        font-size: 0.98rem;
    }

    #strategy-overlay .strategy-backtest-btn {
        margin-right: 0;
        padding: 0 10px;
    }
}


/* ============================================
   SINGLE EXCHANGE HISTORY - SHARED MARKET UI
   ============================================ */
#single-ex-modal {
    padding: 24px;
    background: rgba(4, 4, 4, 0.86);
}

#single-ex-modal > .strategy-page {
    position: relative;
    width: min(1180px, 100%);
    max-width: 1180px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #11100f;
    border: 1px solid #302d2a;
    box-shadow: none;
}

#single-ex-modal > .strategy-page::before {
    content: none;
    display: none;
}

#single-ex-modal .strategy-header {
    min-height: 64px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0;
    padding: 0 16px 0 0;
    background: #12110f;
    border-bottom: 1px solid #302d2a;
}

#single-ex-modal .strategy-back {
    min-width: 106px;
    min-height: 63px;
    height: 63px;
    position: relative;
    justify-content: center;
    gap: 10px;
    padding: 0 15px;
    margin: 0;
    border: 0 !important;
    border-right: 1px solid #302d2a !important;
    background: #0f0f0e !important;
    color: #bbb5af;
    font-family: var(--font-sans);
    font-size: 0.64rem;
    font-weight: 720;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    transition: color 140ms ease, background-color 140ms ease;
}

#single-ex-modal .strategy-back::after {
    content: '';
    width: 18px;
    height: 2px;
    position: absolute;
    right: auto;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    background: #6b3d2d;
    transition: width 140ms ease, background-color 140ms ease;
}

#single-ex-modal .strategy-back:hover {
    background: #171614 !important;
    color: #f3efeb !important;
}

#single-ex-modal .strategy-back:hover::after {
    width: 32px;
    background: var(--accent);
}

#single-ex-modal .strategy-back svg {
    width: 14px;
    height: 14px;
    box-sizing: content-box;
    padding: 4px;
    background: #0b0b0a;
    border: 1px solid #37332f;
    stroke-width: 1.6;
    transition: transform 140ms ease, border-color 140ms ease, color 140ms ease;
}

#single-ex-modal .strategy-back:hover svg {
    transform: translateX(-2px);
    border-color: #665e57;
    color: #ffffff;
}

#single-ex-modal .strategy-title {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 18px;
    overflow: hidden;
    color: #f6f4f1;
    font-family: var(--font-sans);
    font-size: 1.12rem;
    font-weight: 760;
    letter-spacing: -0.025em;
    line-height: 1.05;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#single-ex-modal .strategy-title::before {
    content: 'FUNDING HISTORY';
    margin-bottom: 5px;
    color: #77726c;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1;
}

#single-ex-modal .strategy-apr-badge {
    align-self: center;
    min-width: 112px;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid #3a3733;
    background: #171614;
    color: #efede9;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 650;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    box-shadow: none;
}

#single-ex-modal .strategy-apr-badge::before {
    content: none;
}

#single-ex-modal .strategy-body {
    gap: 16px;
    padding: 16px;
}

#single-ex-modal .strategy-chart-section {
    position: relative;
    gap: 0;
    margin: 0 !important;
    padding: 0;
    overflow: hidden;
    background: #0f0f0e;
    border: 1px solid #302d2a;
    box-shadow: none;
}

#single-ex-modal .strategy-chart-section::before {
    content: none;
}

#single-ex-modal .strategy-chart-header {
    min-height: 52px;
    padding: 0 14px 0 16px;
    border-bottom: 1px solid #292725;
}

#single-ex-modal .strategy-chart-header h3,
#single-ex-modal .strategy-all-rates > h3 {
    margin: 0;
    color: #aaa6a1;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.105em;
    text-transform: uppercase;
}

#single-ex-modal .strategy-chart-header h3::before,
#single-ex-modal .strategy-all-rates > h3::before {
    content: none;
}

#single-ex-modal .chart-timeframe-selector {
    display: grid;
    grid-template-columns: repeat(4, 42px);
    gap: 0;
    border: 1px solid #35322f;
    background: #11100f;
}

#single-ex-modal .strategy-chart-tf-btn {
    min-width: 0;
    height: 30px;
    padding: 0;
    border: 0;
    border-right: 1px solid #35322f;
    background: transparent;
    color: #85807a;
    font-family: var(--font-mono);
    font-size: 0.59rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    box-shadow: none;
}

#single-ex-modal .strategy-chart-tf-btn:last-child {
    border-right: 0;
}

#single-ex-modal .strategy-chart-tf-btn:hover {
    background: #1a1917;
    color: #f2f0ed;
}

#single-ex-modal .strategy-chart-tf-btn.active {
    background: #f2f0ed;
    color: #171614;
    box-shadow: none;
}

#single-ex-modal .strategy-chart-container {
    width: calc(100% - 28px);
    height: 280px !important;
    margin: 14px;
}

#single-ex-modal .strategy-chart-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0 14px 14px;
    background: transparent;
    border: 0;
}

#single-ex-modal .strategy-chart-stat-card {
    position: relative;
    min-height: 74px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 34px 13px 14px;
    text-align: center;
    background: #171614;
    border: 1px solid #2d2a27;
    box-shadow: none;
}

#single-ex-modal .strategy-chart-stat-card::before {
    content: none !important;
}

#single-ex-modal .strategy-chart-stat-card:hover {
    background: #1b1a18;
    border-color: #3b3733;
    transform: none;
}

#single-ex-modal #single-ex-stat-avg-card {
    box-shadow: none;
}

#single-ex-modal .strategy-chart-stat-label {
    color: #85807a;
    font-family: var(--font-sans);
    font-size: 0.57rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

#single-ex-modal .strategy-chart-stat-value {
    color: #f5f2ef;
    font-family: var(--font-mono);
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: -0.025em;
}

#single-ex-modal .strategy-all-rates {
    margin-top: 0 !important;
    padding: 0;
    background: transparent;
    border: 0;
}

#single-ex-modal .strategy-all-rates > h3 {
    min-height: 38px;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
}

#single-ex-modal .strategy-rates-list {
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: 8px;
    padding: 0;
    background: transparent;
}

#single-ex-modal .strategy-rate-item {
    min-height: 42px;
    padding: 0 12px;
    background: #171614;
    border: 1px solid #2d2a27 !important;
    box-shadow: none !important;
}

#single-ex-modal .strategy-rate-item:hover {
    background: #1b1a18 !important;
    border-color: #3b3733 !important;
}

#single-ex-modal .strategy-rate-exchange {
    color: #b9b5b0;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 650;
}

#single-ex-modal .strategy-rate-val {
    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 600;
}

#single-ex-modal .strategy-rate-val.positive { color: #69c79a; }
#single-ex-modal .strategy-rate-val.negative { color: #e0705b; }
#single-ex-modal .strategy-rate-val.zero { color: #716d68; }

#single-ex-modal .strategy-rate-item.is-active,
#single-ex-modal .strategy-rate-item.is-active:hover {
    background: #151a17 !important;
    border-color: #35694f !important;
    box-shadow: inset 2px 0 0 #69c79a !important;
}

#single-ex-modal .strategy-rate-item.is-active .strategy-rate-exchange {
    color: #f4f1ed;
}

#single-ex-modal .strategy-rate-item.is-active .strategy-rate-exchange::before {
    content: none;
}

#single-ex-modal .strategy-rate-item.is-active .strategy-rate-val {
    color: #ffffff !important;
}

#single-ex-modal .strategy-back:focus-visible,
#single-ex-modal .strategy-apr-badge:focus-visible,
#single-ex-modal .strategy-chart-tf-btn:focus-visible,
#single-ex-modal .strategy-rate-item:focus-visible {
    outline: 1px solid #f4f3f2;
    outline-offset: -3px;
}

@media (max-width: 900px) {
    #single-ex-modal .strategy-chart-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #single-ex-modal {
        padding: 0;
    }

    #single-ex-modal > .strategy-page {
        min-height: 100vh;
        max-height: 100vh;
        border: 0;
    }

    #single-ex-modal .strategy-header {
        min-height: 56px;
        padding-right: 8px;
    }

    #single-ex-modal .strategy-back {
        min-width: 52px;
        width: 52px;
        min-height: 55px;
        height: 55px;
        padding: 0;
        font-size: 0;
    }

    #single-ex-modal .strategy-title {
        padding: 0 12px;
        font-size: 0.94rem;
    }

    #single-ex-modal .strategy-apr-badge {
        min-width: 96px;
        min-height: 32px;
        padding: 0 8px;
        font-size: 0.6rem;
    }

    #single-ex-modal .strategy-body {
        padding: 10px;
    }

    #single-ex-modal .strategy-chart-container {
        height: 238px !important;
        margin: 10px;
        width: calc(100% - 20px);
    }

    #single-ex-modal .strategy-chart-stats-grid {
        padding: 0 10px 10px;
    }

    #single-ex-modal .strategy-rates-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    #single-ex-modal .strategy-rates-list {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MARKETS CARD TYPE BALANCE
   ============================================ */
.ex-card-label {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: 'lnum' 1, 'tnum' 1;
}

.ex-card-label-number {
    display: inline-block;
    position: relative;
    top: 0.015em;
    font-size: 1.14em;
    font-weight: 800;
    line-height: 0.8;
    letter-spacing: 0.025em;
}

.ex-card-value {
    margin-top: 12px;
    font-size: clamp(2.15rem, 3.1vw, 2.7rem);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -0.045em;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: 'lnum' 1, 'tnum' 1;
}

.ex-card-change {
    font-size: 0.72rem !important;
}

@media (max-width: 900px) {
    .ex-card-value {
        font-size: clamp(2rem, 7vw, 2.55rem);
    }
}


/* Openable surfaces: one consistent square plus marker in the top-right corner. */
:where(
    #chart-stat-avg-card,
    #strategy-chart-stat-avg-card,
    #single-ex-stat-avg-card,
    #detail-stat-reversals-card,
    #strategy-stat-reversals-card,
    #strategy-long-card,
    #strategy-short-card
) {
    position: relative;
}

:where(
    #chart-stat-avg-card,
    #strategy-chart-stat-avg-card,
    #single-ex-stat-avg-card,
    #detail-stat-reversals-card,
    #strategy-stat-reversals-card,
    #strategy-long-card,
    #strategy-short-card
)::after {
    content: '+';
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    background: #131210;
    border: 1px solid #6f3d2e;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
    transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

:where(
    #chart-stat-avg-card,
    #strategy-chart-stat-avg-card,
    #single-ex-stat-avg-card,
    #detail-stat-reversals-card,
    #strategy-stat-reversals-card,
    #strategy-long-card,
    #strategy-short-card
):hover::after {
    background: #1b1613;
    border-color: var(--accent);
    color: #ffffff;
}

:where(
    #detail-stat-reversals-card,
    #strategy-stat-reversals-card
)[style*="pointer-events: none"]::after {
    display: none;
}

#strategy-overlay .detailed-stats-badge {
    position: relative;
    min-height: 32px;
    padding: 0 38px 0 11px;
    gap: 0;
}

#strategy-overlay .detailed-stats-badge svg {
    display: none;
}

#strategy-overlay .detailed-stats-badge::after {
    content: '+';
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    position: absolute;
    top: 5px;
    right: 5px;
    background: #131210;
    border: 1px solid #6f3d2e;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.67rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

#strategy-overlay .detailed-stats-badge:hover::after {
    background: #1b1613;
    border-color: var(--accent);
    color: #ffffff;
}
/* Historical funding ledgers: flat editorial data surface. */
:where(#history-table-overlay, #single-ex-history-table-overlay) {
    padding: 24px;
    background: rgba(5, 5, 5, 0.86) !important;
    backdrop-filter: none !important;
}

:where(#history-table-modal, #single-ex-history-table-modal) {
    width: min(920px, calc(100vw - 48px)) !important;
    max-width: 920px !important;
    max-height: calc(100vh - 48px) !important;
    position: relative;
    overflow: hidden !important;
    background: #0d0d0c !important;
    border: 1px solid #302d2a !important;
    border-radius: 0 !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.48) !important;
    font-family: var(--font-sans);
}

:where(#history-table-modal, #single-ex-history-table-modal)::before {
    content: '';
    width: 72px;
    height: 2px;
    position: absolute;
    top: -1px;
    left: 20px;
    z-index: 20;
    background: var(--accent);
}

:where(#history-table-modal, #single-ex-history-table-modal) > .modal-header {
    min-height: 66px;
    position: relative;
    align-items: center;
    padding: 15px 58px 15px 20px !important;
    background: #11110f;
    border-bottom: 1px solid #302d2a !important;
}


:where(#history-table-title, #single-ex-history-table-title) {
    max-width: 100%;
    margin: 0;
    color: #f0ede9;
    font-family: var(--font-sans) !important;
    font-size: 1.04rem !important;
    font-weight: 680 !important;
    line-height: 1.25;
    letter-spacing: -0.025em !important;
}


:where(#history-table-close, #single-ex-history-table-close) {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    position: absolute;
    top: 18px;
    right: 18px;
    bottom: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    color: #7e7872 !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

:where(#history-table-close, #single-ex-history-table-close) svg {
    width: 14px;
    height: 14px;
    display: block;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: square;
}

:where(#history-table-close, #single-ex-history-table-close):hover {
    background: #181614 !important;
    border-color: #3b3733 !important;
    color: #eee9e4 !important;
}

:where(#history-table-modal, #single-ex-history-table-modal) > .modal-body {
    max-height: min(66vh, 590px) !important;
    display: block;
    padding: 0 !important;
    overflow: auto !important;
    scrollbar-color: #4a4540 #11110f;
    scrollbar-width: thin;
}

:where(#history-table-modal, #single-ex-history-table-modal) > .modal-body::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

:where(#history-table-modal, #single-ex-history-table-modal) > .modal-body::-webkit-scrollbar-track {
    background: #11110f;
}

:where(#history-table-modal, #single-ex-history-table-modal) > .modal-body::-webkit-scrollbar-thumb {
    background: #4a4540;
    border: 2px solid #11110f;
}

:where(#history-table-modal, #single-ex-history-table-modal) table {
    width: 100% !important;
    min-width: 760px;
    border-spacing: 0;
    border-collapse: separate !important;
    table-layout: fixed;
    text-align: left;
    font-family: var(--font-sans) !important;
}

#single-ex-history-table-modal table {
    min-width: 620px;
}

:where(#history-table-modal, #single-ex-history-table-modal) thead tr {
    color: #8f8983 !important;
    font-family: var(--font-sans) !important;
    font-size: 0.62rem !important;
}

:where(#history-table-modal, #single-ex-history-table-modal) thead th {
    height: 48px;
    position: sticky !important;
    top: 0;
    z-index: 10;
    padding: 0 16px !important;
    background: #10100f !important;
    border-right: 1px solid #242220;
    border-bottom: 1px solid #34312e;
    color: #918b85;
    font-family: var(--font-sans);
    font-size: 0.6rem;
    font-weight: 700 !important;
    line-height: 1.15;
    letter-spacing: 0.075em;
    text-transform: uppercase;
    vertical-align: middle;
    box-shadow: none !important;
}

:where(#history-table-modal, #single-ex-history-table-modal) thead th:last-child {
    border-right: 0;
}


:where(#history-table-body, #single-ex-history-table-body) {
    font-family: var(--font-mono) !important;
    font-size: 0.76rem !important;
    font-variant-numeric: tabular-nums;
}

:where(#history-table-body, #single-ex-history-table-body) > tr {
    background: #0d0d0c !important;
    border: 0 !important;
    transition: background-color 120ms ease !important;
}

:where(#history-table-body, #single-ex-history-table-body) > tr:nth-child(even) {
    background: #10100f !important;
}

:where(#history-table-body, #single-ex-history-table-body) > tr:hover {
    background: #181512 !important;
}

:where(#history-table-body, #single-ex-history-table-body) > tr > td {
    height: 51px;
    padding: 0 16px !important;
    border-right: 1px solid #211f1d;
    border-bottom: 1px solid #242220;
    color: #d4d0cc !important;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 540;
    line-height: 1.2;
    vertical-align: middle;
    white-space: nowrap;
}

:where(#history-table-body, #single-ex-history-table-body) > tr > td:last-child {
    border-right: 0;
}

:where(#history-table-body, #single-ex-history-table-body) > tr > td:first-child {
    color: #9a948e !important;
    font-size: 0.7rem;
    letter-spacing: 0.015em;
}

:where(#history-table-body, #single-ex-history-table-body) span[style*="font-size: 0.75rem"] {
    margin-left: 3px;
    color: #625e59 !important;
    font-size: 0.61rem !important;
    font-weight: 500;
}

:where(#history-table-body, #single-ex-history-table-body) span[style*="#4caf50"] {
    color: var(--positive) !important;
}

:where(#history-table-body, #single-ex-history-table-body) span[style*="#ff5252"] {
    color: var(--negative) !important;
}

:where(#history-table-body, #single-ex-history-table-body) > tr:last-child:not(:only-child) {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: #171411 !important;
    border: 0 !important;
    box-shadow: inset 0 2px 0 #6f3d2c, 0 -10px 24px rgba(0, 0, 0, 0.28);
    font-weight: 650 !important;
}

:where(#history-table-body, #single-ex-history-table-body) > tr:last-child:not(:only-child):hover {
    background: #171411 !important;
}

:where(#history-table-body, #single-ex-history-table-body) > tr:last-child:not(:only-child) > td {
    height: 56px;
    background: transparent;
    border-bottom: 0;
    color: #efebe7 !important;
    font-size: 0.73rem;
}

:where(#history-table-body, #single-ex-history-table-body) > tr:last-child:not(:only-child) > td:first-child {
    font-family: var(--font-sans) !important;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    :where(#history-table-overlay, #single-ex-history-table-overlay) {
        align-items: flex-start;
        padding: 12px;
    }

    :where(#history-table-modal, #single-ex-history-table-modal) {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px) !important;
    }

    :where(#history-table-modal, #single-ex-history-table-modal) > .modal-header {
        min-height: 58px;
        padding: 13px 48px 13px 14px !important;
    }

    :where(#history-table-title, #single-ex-history-table-title) {
        max-width: 100%;
        font-size: 0.9rem !important;
    }

    :where(#history-table-close, #single-ex-history-table-close) {
        top: 14px;
        right: 12px;
        bottom: auto !important;
    }

    :where(#history-table-modal, #single-ex-history-table-modal) > .modal-body {
        max-height: calc(100vh - 82px) !important;
    }
}

/* Language selector: compact editorial dropdown, English-only for now. */
#lang-switcher {
    width: 124px;
}

.language-trigger {
    width: 124px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 13px 0 15px;
    background: #0b0b0a;
    border: 1px solid #302d2a;
    border-radius: 0;
    color: #d7d3cf;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1;
    cursor: pointer;
    transition: background-color 130ms ease, border-color 130ms ease, color 130ms ease;
}

.language-trigger:hover,
.language-trigger[aria-expanded="true"] {
    background: #141210;
    border-color: #5d392c;
    color: #f2efec;
}

.language-trigger:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

.language-trigger svg {
    flex: 0 0 auto;
    color: #78726d;
    transition: transform 150ms ease, color 130ms ease;
}

.language-trigger[aria-expanded="true"] svg {
    color: var(--accent);
    transform: rotate(180deg);
}

#lang-switcher .lang-dropdown {
    min-width: 124px;
    top: calc(100% + 5px);
    right: 0;
    padding: 0;
    overflow: hidden;
    background: #0f0f0e;
    border: 1px solid #302d2a;
    border-radius: 0;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
    animation: none;
}

#lang-switcher .lang-dropdown::before {
    content: 'INTERFACE';
    height: 27px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid #282522;
    color: #5e5954;
    font-family: var(--font-mono);
    font-size: 0.43rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

#lang-switcher .lang-option {
    width: 100%;
    height: 41px;
    display: grid;
    grid-template-columns: 24px 1fr 8px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: #11110f;
    border: 0;
    color: #d3cfca;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 620;
    text-align: left;
    cursor: pointer;
}

#lang-switcher .lang-option::before {
    content: 'EN';
    color: #77716b;
    font-family: var(--font-mono);
    font-size: 0.48rem;
    font-weight: 600;
}


#lang-switcher .lang-option:hover {
    background: #191613;
    color: #ffffff;
}

#lang-switcher .lang-option.active {
    background: #151310;
    color: #f0ede9;
}


@media (max-width: 520px) {
    #lang-switcher,
    .language-trigger {
        width: 108px;
    }

    #lang-switcher .lang-dropdown {
        min-width: 108px;
    }
}

/* Strategy cards: chart always fills the remaining card surface. */
#anomaly-ticker .ticker-card {
    grid-template-rows: 44px minmax(0, 1fr);
}

#anomaly-ticker .ticker-card .ticker-header {
    flex: 0 0 44px;
}

#anomaly-ticker .ticker-card .ticker-chart-box {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0 -14px -14px;
    position: relative;
    overflow: hidden;
}

#anomaly-ticker .ticker-card .ticker-chart-box canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    position: absolute;
    inset: 0;
}

#anomaly-ticker .ticker-card .ticker-realized-avg {
    top: 50%;
    height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 0;
    overflow: hidden;
    color: #8d8781;
    background: rgba(10, 10, 10, 0.9);
    border: 0;
    border-top: 1px solid #292623;
    border-bottom: 1px solid #292623;
    font-family: var(--font-sans);
    font-size: 0.56rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.075em;
    box-shadow: none;
    backdrop-filter: none;
    transition: border-color 160ms ease, background 160ms ease;
}

#anomaly-ticker .ticker-realized-period {
    height: 100%;
    display: inline-flex;
    align-items: center;
    padding: 0 7px;
    color: #69635e;
    border-right: 1px solid #292623;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 650;
    letter-spacing: 0;
}

#anomaly-ticker .ticker-realized-label {
    padding: 0 7px;
    white-space: nowrap;
}

#anomaly-ticker .ticker-realized-value {
    padding: 0 8px 0 0;
    color: #d8d3ce;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

#anomaly-ticker .ticker-card:hover .ticker-realized-avg {
    color: #aaa39d;
    background: rgba(12, 12, 12, 0.94);
    border-color: #3a3531;
}

#anomaly-ticker .ticker-card:hover .ticker-realized-value {
    color: #f0ede9;
}

/* Strategy signal: unboxed editorial metrics aligned with the card header. */
.ticker-signal {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    margin-top: 1px;
    padding: 1px 0 0;
    font-family: var(--font-mono);
}

.ticker-signal-item {
    min-width: 24px;
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 5px;
}

.ticker-signal-divider {
    width: 1px;
    height: 25px;
    background: #302d2a;
}

.ticker-signal-key {
    color: #68625d;
    font-family: var(--font-sans);
    font-size: 0.4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.09em;
}

.ticker-signal-value {
    width: 100%;
    color: #c5c0bb;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 620;
    line-height: 1;
    text-align: center;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

.ticker-signal-item.is-streak .ticker-signal-value {
    color: var(--positive);
}

.ticker-card:hover .ticker-signal-divider {
    background: #45403b;
}

.ticker-card:hover .ticker-signal-key {
    color: #827b75;
}
/* Primary navigation: unboxed editorial links, no numeric prefixes. */
.header-center {
    height: 100%;
}

.header-nav {
    width: auto;
    height: 100%;
    display: flex;
    align-items: stretch;
    gap: 42px;
    background: transparent;
    border: 0;
}

.header-nav .nav-link {
    width: auto;
    min-width: 0;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
}

.header-nav .nav-link:last-child {
    border: 0;
}

.header-nav .nav-icon {
    width: auto;
    height: 100%;
    display: flex;
    align-items: center;
    grid-template-columns: none;
    padding: 1px 0 0;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    color: #716c67;
    font-family: var(--font-sans);
    font-size: 0.76rem;
    font-weight: 620;
    line-height: 1;
    letter-spacing: -0.01em;
    text-align: left;
}

.header-nav .nav-icon::before {
    content: none !important;
    display: none !important;
}

.header-nav .nav-link::after {
    content: '';
    width: 0;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: var(--accent);
    transition: width 150ms ease;
}

.header-nav .nav-link:hover:not(.disabled) .nav-icon {
    color: #d2ceca;
}

.header-nav .nav-link:hover:not(.disabled)::after {
    width: 14px;
    background: #6b3d2d;
}

.header-nav .nav-link.active .nav-icon {
    color: #f2efec;
    font-weight: 680;
}

.header-nav .nav-link.active::after,
.header-nav .nav-link.active:hover::after {
    width: 30px;
    background: var(--accent);
}

.header-nav .nav-link.disabled {
    opacity: 1;
}

.header-nav .nav-link.disabled .nav-icon {
    color: #4a4642;
}

.header-nav .nav-link.disabled .nav-icon::after {
    content: 'SOON';
    position: relative;
    top: -8px;
    right: auto;
    margin-left: 7px;
    color: #4d4844;
    font-family: var(--font-mono);
    font-size: 0.39rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
}

.header-nav .nav-link:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 5px;
}

.header-nav .nav-link:focus-visible .nav-icon {
    outline: 0;
}

@media (max-width: 980px) {
    .header-nav {
        width: auto;
        gap: 26px;
    }

    .header-nav .nav-icon {
        grid-template-columns: none;
        padding: 1px 0 0;
        font-size: 0.68rem;
    }
}

/* Asset overview modal: compact funding matrix in the shared editorial system. */
#modal-overlay {
    padding: 20px;
    background: rgba(5, 5, 5, 0.87);
    backdrop-filter: none;
}

#detail-modal {
    width: min(1180px, calc(100vw - 40px));
    max-width: 1180px;
    max-height: calc(100vh - 40px);
    position: relative;
    overflow: hidden;
    background: #0d0d0c;
    border: 1px solid #302d2a;
    border-radius: 0;
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.5);
    font-family: var(--font-sans);
}

#detail-modal::before {
    content: '';
    width: 72px;
    height: 2px;
    position: absolute;
    top: -1px;
    left: 20px;
    z-index: 20;
    background: var(--accent);
}

#detail-modal > .modal-header {
    min-height: 82px;
    position: relative;
    align-items: flex-end !important;
    padding: 18px 20px 16px;
    background: #11110f;
    border-bottom: 1px solid #302d2a;
}

#detail-modal #modal-title {
    margin: 0;
    color: #f1eeea;
    font-family: var(--font-sans);
    font-size: 1.06rem;
    font-weight: 690;
    line-height: 1;
    letter-spacing: -0.025em;
}

#detail-modal #modal-title::before {
    content: 'ASSET OVERVIEW';
    display: block;
    margin-bottom: 8px;
    color: #77716b;
    font-family: var(--font-mono);
    font-size: 0.46rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.13em;
}

#detail-modal #modal-title::after {
    content: ' / USDT';
    color: #69635e;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 550;
    letter-spacing: -0.02em;
}

#detail-modal #modal-close {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    position: absolute;
    right: 18px;
    bottom: 13px;
    padding: 0;
    background: #151412;
    border: 1px solid #383430;
    border-radius: 0;
    color: #8c8580;
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1;
    box-shadow: none;
}

#detail-modal #modal-close:hover {
    background: #211713;
    border-color: #74412f;
    color: #f5eee9;
}

#detail-modal > .modal-body {
    max-height: calc(100vh - 123px);
    display: flex;
    gap: 20px;
    padding: 18px;
    overflow: auto;
    scrollbar-color: #4a4540 #11110f;
    scrollbar-width: thin;
}

#detail-modal > .modal-body::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

#detail-modal > .modal-body::-webkit-scrollbar-track {
    background: #11110f;
}

#detail-modal > .modal-body::-webkit-scrollbar-thumb {
    background: #4a4540;
    border: 2px solid #11110f;
}

#detail-modal .modal-section {
    min-width: 0;
}

#detail-modal .modal-section + .modal-section {
    margin-top: 0 !important;
}

#detail-modal .modal-section > h3 {
    min-height: 26px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    color: #77716b;
    font-family: var(--font-sans);
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.085em;
}

#detail-modal .modal-section > h3::before {
    content: '';
    width: 2px;
    height: 10px;
    background: var(--accent);
}

#detail-modal .modal-section > h3::after {
    content: '';
    height: 1px;
    flex: 1;
    background: #242220;
}

#detail-modal .modal-arb-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) 148px;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: #0f0f0e;
    border: 1px solid #302d2a;
    border-radius: 0;
}

#detail-modal .modal-arb-leg {
    min-width: 0;
    min-height: 92px;
    position: relative;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    padding: 15px 18px;
    background: #11110f;
    border: 0;
    border-radius: 0;
    transition: background-color 130ms ease;
}

#detail-modal .modal-arb-leg.leg-long {
    background: #101512;
    border-top: 2px solid rgba(105, 199, 154, 0.72);
}

#detail-modal .modal-arb-leg.leg-short {
    background: #161110;
    border-top: 2px solid rgba(224, 103, 79, 0.72);
}

#detail-modal .modal-arb-leg:hover {
    background: #191613;
    border-color: inherit;
    transform: none;
}

#detail-modal .modal-arb-leg[style*="cursor: pointer"]::after {
    content: '\2197';
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    position: absolute;
    top: 11px;
    right: 11px;
    background: #131210;
    border: 1px solid #3a3734;
    color: #8d8781;
    font-family: var(--font-mono);
    font-size: 0.56rem;
    pointer-events: none;
}

#detail-modal .modal-arb-leg[style*="cursor: pointer"]:hover::after {
    background: #1b1613;
    border-color: #70402f;
    color: #f07554;
}

#detail-modal .modal-arb-leg-label {
    font-family: var(--font-mono);
    font-size: 0.46rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.11em;
}

#detail-modal .modal-arb-leg-exchange {
    max-width: calc(100% - 30px);
    overflow: hidden;
    color: #e9e5e1;
    font-family: var(--font-sans);
    font-size: 0.84rem;
    font-weight: 680;
    line-height: 1.1;
    text-overflow: ellipsis;
}

#detail-modal .modal-arb-leg-rate {
    color: #a49e98;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 560;
}

#detail-modal .modal-arb-vs {
    position: relative;
    background: #0d0d0c;
    border-right: 1px solid #302d2a;
    border-left: 1px solid #302d2a;
    color: #5f5a55;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    letter-spacing: 0.08em;
}

#detail-modal .modal-arb-vs::before,
#detail-modal .modal-arb-vs::after {
    content: '';
    width: 1px;
    height: 22px;
    position: absolute;
    left: 50%;
    background: #302d2a;
}

#detail-modal .modal-arb-vs::before {
    top: 0;
}

#detail-modal .modal-arb-vs::after {
    bottom: 0;
}

#detail-modal .modal-arb-apr {
    min-width: 0;
    align-items: flex-start;
    padding: 16px 18px;
    background: #15120f;
    border: 0;
    border-top: 2px solid var(--accent);
}

#detail-modal .modal-arb-apr-label {
    margin-bottom: 9px;
    color: #77716b;
    font-family: var(--font-mono);
    font-size: 0.46rem;
    font-weight: 650;
    letter-spacing: 0.11em;
}

#detail-modal .modal-arb-apr-value {
    color: var(--positive);
    font-family: var(--font-mono);
    font-size: 1.12rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.045em;
}

#detail-modal .modal-table-container {
    padding: 0 !important;
    overflow: auto !important;
    background: #0d0d0c !important;
    border: 1px solid #302d2a !important;
    border-radius: 0 !important;
}

#detail-modal .modal-table-container table {
    min-width: 1020px;
    border-collapse: separate !important;
    border-spacing: 0;
    table-layout: fixed;
}

#detail-modal .modal-table-container thead th {
    height: 46px;
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 0 12px !important;
    background: #11110f;
    border-right: 1px solid #242220;
    border-bottom: 1px solid #34312e;
    color: #827c76;
    font-family: var(--font-sans);
    font-size: 0.54rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.07em;
    text-align: left;
}

#detail-modal .modal-table-container thead th:first-child {
    text-align: left !important;
}

#detail-modal .modal-table-container thead th:last-child {
    border-right: 0;
}

#detail-modal .modal-sort-btn:hover {
    color: #d4cfca;
}

#detail-modal .sort-icon {
    margin-left: 3px;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.48rem;
}

#detail-modal #modal-exchanges-tbody {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

#detail-modal #modal-exchanges-tbody tr {
    cursor: default;
    background: #0d0d0c;
}

#detail-modal #modal-exchanges-tbody tr:nth-child(even) {
    background: #10100f;
}

#detail-modal #modal-exchanges-tbody tr:hover td {
    background: #181512;
}

#detail-modal #modal-exchanges-tbody td {
    height: 48px;
    padding: 0 12px !important;
    background: transparent;
    border-right: 1px solid #211f1d;
    border-bottom: 1px solid #242220;
    color: #a9a39d;
    font-family: var(--font-mono) !important;
    font-size: 0.66rem;
    font-weight: 540;
    text-align: left;
    vertical-align: middle;
}

#detail-modal #modal-exchanges-tbody td:first-child {
    color: #e1ddd9;
    font-family: var(--font-sans) !important;
    font-size: 0.69rem;
    font-weight: 650 !important;
    text-align: left !important;
}

#detail-modal #modal-exchanges-tbody td:last-child {
    border-right: 0;
}

#detail-modal #modal-exchanges-tbody td[style*="cursor: pointer"] {
    box-shadow: inset 0 -1px 0 #63392b;
}

#detail-modal #modal-exchanges-tbody td[style*="cursor: pointer"]:hover {
    background: #211713 !important;
    color: #f0ede9 !important;
}

#detail-modal .modal-ex-link {
    color: #e7e3df;
}

#detail-modal .modal-ex-link::after {
    content: '\2197';
    margin-left: 5px;
    color: #716a64;
    font-family: var(--font-mono);
    font-size: 0.52rem;
}

#detail-modal .modal-ex-link:hover,
#detail-modal .modal-ex-link:hover::after {
    color: var(--accent);
}

@media (max-width: 820px) {
    #modal-overlay {
        align-items: flex-start;
        padding: 12px;
    }

    #detail-modal {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }

    #detail-modal > .modal-body {
        max-height: calc(100vh - 106px);
        padding: 12px;
    }

    #detail-modal .modal-arb-pair {
        grid-template-columns: 1fr;
    }

    #detail-modal .modal-arb-vs {
        min-height: 34px;
        border: 0;
        border-top: 1px solid #302d2a;
        border-bottom: 1px solid #302d2a;
    }

    #detail-modal .modal-arb-vs::before,
    #detail-modal .modal-arb-vs::after {
        display: none;
    }
}

#detail-modal .modal-arb-apr {
    border-left: 1px solid #302d2a;
}

/* Chart mode control: exact shared baseline for both segments. */
#strategy-overlay #strategy-chart-mode-selector {
    height: 30px;
    display: inline-grid;
    grid-auto-flow: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: #0d0d0c;
    border: 1px solid #302d2a;
    box-sizing: border-box;
}

#strategy-overlay #strategy-chart-mode-selector .strategy-chart-mode-btn {
    height: 28px;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 12px;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #77716b;
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 680;
    line-height: 1;
    vertical-align: top;
    box-sizing: border-box;
}

#strategy-overlay #strategy-chart-mode-selector .strategy-chart-mode-btn + .strategy-chart-mode-btn {
    border-left: 1px solid #302d2a;
}

#strategy-overlay #strategy-chart-mode-selector .strategy-chart-mode-btn:hover {
    color: #d9d5d1;
}

#strategy-overlay #strategy-chart-mode-selector .strategy-chart-mode-btn.active {
    height: 28px;
    background: var(--accent);
    border-color: var(--accent);
    color: #ffffff;
}

/* Strategy metrics: shared two-row grid with optical vertical centering. */
#strategy-overlay .strategy-chart-stat-card {
    display: grid;
    grid-template-rows: 12px 20px;
    align-content: center;
    justify-items: center;
    gap: 5px;
    padding: 8px 12px;
    box-sizing: border-box;
}

#strategy-overlay .strategy-chart-stat-label {
    min-width: 0;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-family: var(--font-sans);
    line-height: 12px;
    text-align: center;
}

#strategy-overlay .strategy-chart-stat-value {
    min-width: 0;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-family: var(--font-mono);
    line-height: 20px;
    text-align: center;
}

/* Footer destinations: equal cells, centered labels, no trailing glyphs. */
#main-footer .footer-right {
    display: grid;
    grid-template-columns: repeat(2, 116px);
    align-items: stretch;
    justify-content: end;
    gap: 0;
}

#main-footer .footer-link {
    width: 116px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-left: 1px solid #242424;
    box-sizing: border-box;
    line-height: 1;
    text-align: center;
}

#main-footer .footer-link:last-child {
    border-right: 1px solid #242424;
}

#main-footer .footer-link::after {
    content: none;
    display: none;
}

@media (max-width: 560px) {
    #main-footer .footer-right {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #main-footer .footer-link {
        width: auto;
        min-width: 0;
        padding: 0 4px;
        font-size: 0.46rem;
    }
}

/* Footer countdown: plain label and timer without a framed block. */
#main-footer .footer-center {
    align-items: center;
    border-right: 0;
    border-left: 0;
}

#main-footer .footer-ticker {
    height: auto;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    color: #77716b;
}

#main-footer .footer-ticker-label {
    display: inline-block;
    padding: 0;
    line-height: 1;
}

#main-footer #funding-countdown {
    display: inline-block;
    min-width: 0;
    height: auto;
    padding: 0;
    background: transparent;
    color: #d8d3ce;
    font-size: 0.67rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.035em;
}

@media (max-width: 560px) {
    #main-footer .footer-ticker {
        grid-template-columns: none;
        gap: 0;
    }
}

/* Footer identity: baseline-aligned text without the accent emblem. */
#main-footer .footer-left {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: baseline;
    align-content: center;
    justify-content: start;
    gap: 9px;
}

#main-footer .footer-left::before {
    content: none;
    display: none;
}

#main-footer .footer-brand,
#main-footer .footer-copy {
    display: block;
    margin: 0;
    line-height: 1;
}

/* Chart venue links: compact execution controls with restrained side cues. */
#strategy-chart-legend,
#backtest-chart-legend {
    gap: 6px !important;
}

.chart-trade-link {
    position: relative;
    height: 34px;
    min-width: 126px;
    display: inline-grid;
    grid-template-columns: auto auto 12px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 11px 0 12px;
    overflow: hidden;
    background: #11100f;
    border: 1px solid #34312e;
    border-radius: 0;
    color: #aaa49e;
    font-family: var(--font-sans);
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.chart-trade-link::before {
    content: '';
    position: absolute;
    inset: -1px auto -1px -1px;
    width: 2px;
    background: currentColor;
}

.chart-trade-link .chart-trade-label {
    color: #77716b;
    font-size: 0.54rem;
    font-weight: 650;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.chart-trade-link .chart-trade-exchange {
    color: currentColor;
    font-size: 0.66rem;
    font-weight: 720;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.chart-trade-link svg {
    width: 11px;
    height: 11px;
    stroke: currentColor;
    stroke-width: 1.35;
    stroke-linecap: square;
    stroke-linejoin: miter;
    opacity: 0.72;
}

.chart-trade-link.is-long {
    color: #67c395;
}

.chart-trade-link.is-short {
    color: #df745f;
}

.chart-trade-link:hover {
    background: #171513;
    border-color: #56504a;
    color: #f1ede8;
}

.chart-trade-link.is-long:hover::before {
    background: #67c395;
}

.chart-trade-link.is-short:hover::before {
    background: #df745f;
}

.chart-trade-link:focus-visible {
    outline: 1px solid #d5d0ca;
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .chart-trade-link {
        min-width: 108px;
        padding-inline: 9px;
    }

    .chart-trade-link .chart-trade-label {
        display: none;
    }
}
/* Campaign rail: restrained editorial treatment aligned with the core interface. */
#exchanges-dashboard-page .active-campaigns-section {
    margin-bottom: 10px !important;
    padding: 0;
    background: transparent;
    border: 0;
}

#exchanges-dashboard-page .campaigns-heading {
    min-height: 40px;
    display: flex;
    align-items: center;
    margin: 0 0 10px !important;
    padding: 0 2px;
    border-bottom: 1px solid #292725;
    color: inherit !important;
    letter-spacing: 0;
    text-transform: none;
}

.campaigns-title {
    color: #d8d3ce;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    font-weight: 690;
    line-height: 1;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

#active-campaigns-grid {
    gap: 8px !important;
    padding: 0 0 10px !important;
    align-items: stretch;
}

#active-campaigns-grid .campaign-card {
    position: relative;
    flex: 0 0 286px !important;
    min-height: 164px;
    display: grid !important;
    grid-template-rows: 44px 1fr;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: #0d0d0c !important;
    border: 1px solid #2d2a27 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: default !important;
    transition: background-color 120ms ease, border-color 120ms ease;
}

#active-campaigns-grid .campaign-card::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    width: 34px;
    height: 1px;
    background: #d24a2f;
}

#active-campaigns-grid .campaign-card:hover {
    background: #10100f !important;
    border-color: #4a4540 !important;
}

.campaign-card-head {
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-bottom: 1px solid #292725;
}

.campaign-exchange {
    overflow: hidden;
    color: #eeeae6;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-card-body {
    min-width: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    padding: 13px 14px 14px;
}

.campaign-action {
    display: grid;
    gap: 6px;
    padding-bottom: 11px;
}

.campaign-field-label {
    color: #716b65;
    font-family: var(--font-sans);
    font-size: 0.48rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.campaign-action strong {
    overflow: hidden;
    color: #cbc6c1;
    font-family: var(--font-sans);
    font-size: 0.67rem;
    font-weight: 620;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-reward {
    display: grid;
    align-content: end;
    gap: 8px;
    padding-top: 11px;
    border-top: 1px solid #292725;
}

.campaign-reward-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.campaign-note {
    color: #9d8256;
    font-family: var(--font-mono);
    font-size: 0.42rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.065em;
}

.campaign-reward > strong {
    overflow: hidden;
    color: #f0ece8;
    font-family: var(--font-mono);
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.market-stats-divider {
    display: grid;
    grid-template-columns: minmax(28px, 1fr) auto minmax(28px, 1fr);
    align-items: center;
    gap: 15px;
    margin: 16px 0 20px;
}

.market-stats-divider::before,
.market-stats-divider::after {
    content: '';
    height: 1px;
    background: #292725;
}

.market-stats-divider span {
    color: #77716b;
    font-family: var(--font-sans);
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    #active-campaigns-grid .campaign-card {
        flex-basis: 258px !important;
    }
}
/* Supported exchange count: deliberately simple terminal statistic. */
#exchanges-dashboard-page .supported-exchanges-card {
    justify-content: flex-start;
    padding-bottom: 18px;
}

#exchanges-dashboard-page .supported-exchanges-card .ex-card-value {
    margin: auto 0;
    font-size: clamp(3rem, 4.4vw, 4.25rem);
    font-weight: 620;
    line-height: 0.9;
    letter-spacing: -0.065em;
}
/* Primary navigation: open editorial row with a restrained active marker. */
.header-center {
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.header-nav {
    width: auto;
    height: 100%;
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 34px;
    padding: 0;
    background: transparent;
    border: 0;
}

.header-nav .nav-link {
    width: auto;
    min-width: 0;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 3px;
    border: 0;
}

.header-nav .nav-link + .nav-link::before {
    content: none !important;
    display: none !important;
}

.header-nav .nav-icon {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    padding: 0;
    overflow: visible;
    background: transparent !important;
    border: 0 !important;
    color: #79736d;
    font-family: var(--font-sans);
    font-size: 0.73rem;
    font-weight: 640;
    line-height: 1;
    letter-spacing: -0.005em;
    text-align: left;
    transition: color 130ms ease;
}

.header-nav .nav-icon::before,
.header-nav .nav-link.disabled .nav-icon::after {
    content: none !important;
    display: none !important;
}

.header-nav .nav-link::after {
    content: '';
    width: 0;
    height: 2px;
    position: absolute;
    right: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #6b3d2d;
    transition: width 140ms ease, background-color 140ms ease;
}

.header-nav .nav-link:hover:not(.disabled) .nav-icon {
    color: #c9c4bf;
}

.header-nav .nav-link:hover:not(.disabled)::after {
    width: 12px;
}

.header-nav .nav-link.active .nav-icon {
    color: #f2efec;
    font-weight: 710;
}

.header-nav .nav-link.active::after,
.header-nav .nav-link.active:hover::after {
    width: 28px;
    background: var(--accent);
}

.header-nav .nav-link.disabled {
    opacity: 1;
    cursor: default;
}

.header-nav .nav-link.disabled .nav-icon {
    color: #504b47;
}

.header-nav .nav-link:focus-visible {
    outline: 0;
}

.header-nav .nav-link:focus-visible .nav-icon {
    color: #f2efec;
}

.header-nav .nav-link:focus-visible::after {
    width: 12px;
}

@media (max-width: 980px) {
    .header-nav {
        gap: 20px;
    }

    .header-nav .nav-link {
        padding: 0 2px;
    }

    .header-nav .nav-icon {
        font-size: 0.68rem;
    }
}
/* Asset detail modal: unified neutral funding workspace. */
#modal-overlay {
    background: rgba(4, 4, 4, 0.9);
}

#detail-modal {
    background: #0d0d0c;
    border-color: #2b2927;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62);
}

#detail-modal::before {
    content: none;
    display: none;
}

#detail-modal > .modal-header {
    min-height: 64px;
    align-items: center !important;
    padding: 0 20px;
    background: #10100f;
    border-bottom-color: #2b2927;
}

#detail-modal #modal-title {
    color: #eeeae6;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

#detail-modal #modal-title::before {
    content: none;
    display: none;
}

#detail-modal #modal-title::after {
    color: #716b66;
    font-size: 0.66rem;
    font-weight: 560;
}

#detail-modal #modal-close {
    width: 30px;
    height: 30px;
    top: 50%;
    right: 17px;
    bottom: auto;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #77716c;
    font-size: 1.05rem;
}

#detail-modal #modal-close:hover {
    background: #181715;
    border: 0;
    color: #e9e4df;
}

#detail-modal > .modal-body {
    max-height: calc(100vh - 104px);
    gap: 22px;
    padding: 20px;
    background: #0d0d0c;
    scrollbar-color: #3d3935 #0d0d0c;
}

#detail-modal .modal-section > h3 {
    min-height: 18px;
    gap: 12px;
    margin: 0 0 10px;
    color: #89827c;
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.075em;
}

#detail-modal .modal-section > h3::before {
    content: none;
    display: none;
}

#detail-modal .modal-section > h3::after {
    background: #292725;
}

#detail-modal .modal-arb-pair {
    grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) 132px;
    background: #10100f;
    border-color: #2b2927;
}

#detail-modal .modal-arb-leg,
#detail-modal .modal-arb-leg.leg-long,
#detail-modal .modal-arb-leg.leg-short {
    min-height: 88px;
    gap: 8px;
    padding: 15px 17px;
    background: #111110;
    border: 0;
}

#detail-modal .modal-arb-leg:hover,
#detail-modal .modal-arb-leg.leg-long:hover,
#detail-modal .modal-arb-leg.leg-short:hover {
    background: #151413;
}

#detail-modal .modal-arb-leg[style*="cursor: pointer"]::after {
    top: 12px;
    right: 12px;
    background: transparent;
    border-color: #34312e;
    color: #77716b;
}

#detail-modal .modal-arb-leg[style*="cursor: pointer"]:hover::after {
    background: #191715;
    border-color: #4a4540;
    color: #b8b1aa;
}

#detail-modal .modal-arb-leg-label.long {
    color: #58bd8c;
}

#detail-modal .modal-arb-leg-label.short {
    color: #d96954;
}

#detail-modal .modal-arb-leg-exchange {
    color: #ebe7e3;
}

#detail-modal .modal-arb-leg-rate {
    color: #aaa39d;
}

#detail-modal .modal-arb-vs {
    background: #0e0e0d;
    border-color: #2b2927;
    color: #625d58;
}

#detail-modal .modal-arb-vs::before,
#detail-modal .modal-arb-vs::after {
    background: #2b2927;
}

#detail-modal .modal-arb-apr {
    justify-content: center;
    padding: 15px 17px;
    background: #111110;
    border: 0;
    border-left: 1px solid #2b2927;
}

#detail-modal .modal-arb-apr-label {
    margin-bottom: 8px;
    color: #77716b;
}

#detail-modal .modal-arb-apr-value {
    color: #62c795;
    font-size: 1.08rem;
    font-weight: 670;
}

#detail-modal .modal-table-container {
    background: #0e0e0d !important;
    border-color: #2b2927 !important;
}

#detail-modal .modal-table-container thead th {
    height: 43px;
    background: #111110;
    border-right-color: #252321;
    border-bottom-color: #302d2a;
    color: #837d77;
}

#detail-modal .sort-icon {
    color: #6d6761;
}

#detail-modal #modal-exchanges-tbody tr,
#detail-modal #modal-exchanges-tbody tr:nth-child(even) {
    background: #0e0e0d;
}

#detail-modal #modal-exchanges-tbody tr:hover td {
    background: #141312;
}

#detail-modal #modal-exchanges-tbody td {
    height: 47px;
    border-right-color: #22201e;
    border-bottom-color: #252321;
    color: #aaa49e;
}

#detail-modal #modal-exchanges-tbody td:first-child {
    color: #e4e0dc;
}

#detail-modal #modal-exchanges-tbody td[style*="cursor: pointer"] {
    box-shadow: none;
}

#detail-modal #modal-exchanges-tbody td[style*="cursor: pointer"]:hover {
    background: #191715 !important;
    color: #eee9e4 !important;
}

#detail-modal .modal-ex-link::after {
    color: #69635e;
}

#detail-modal .modal-ex-link:hover,
#detail-modal .modal-ex-link:hover::after {
    color: #c7c0ba;
}

@media (max-width: 820px) {
    #detail-modal > .modal-body {
        max-height: calc(100vh - 88px);
    }

    #detail-modal .modal-arb-apr {
        border-top: 1px solid #2b2927;
        border-left: 0;
    }
}
/* Single exchange funding window: centered in the active viewport. */
#single-ex-modal.strategy-overlay {
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@media (max-width: 640px) {
    #single-ex-modal.strategy-overlay {
        align-items: flex-start;
    }
}
/* Single exchange ledger: aligned neutral financial table. */
#single-ex-history-table-overlay {
    align-items: center;
    justify-content: center;
    background: rgba(4, 4, 4, 0.9) !important;
}

#single-ex-history-table-modal {
    width: min(900px, calc(100vw - 48px)) !important;
    max-width: 900px !important;
    background: #0d0d0c !important;
    border-color: #2b2927 !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.62) !important;
}

#single-ex-history-table-modal::before {
    content: none;
    display: none;
}

#single-ex-history-table-modal > .modal-header {
    min-height: 62px;
    padding: 0 56px 0 20px !important;
    background: #10100f;
    border-bottom-color: #2b2927 !important;
}

#single-ex-history-table-title {
    color: #eeeae6;
    font-size: 0.96rem !important;
    font-weight: 690 !important;
    line-height: 1.2;
    letter-spacing: -0.018em !important;
}

#single-ex-history-table-close {
    width: 30px;
    height: 30px;
    top: 16px;
    right: 16px;
    background: transparent !important;
    border: 0 !important;
    color: #77716c !important;
}

#single-ex-history-table-close:hover {
    background: #181715 !important;
    border: 0 !important;
    color: #e9e4df !important;
}

#single-ex-history-table-modal > .modal-body {
    max-height: min(68vh, 610px) !important;
    background: #0d0d0c;
    scrollbar-color: #3d3935 #0d0d0c;
}

#single-ex-history-table-modal table {
    min-width: 660px;
    table-layout: fixed;
}

#single-ex-history-table-modal thead th {
    height: 46px;
    padding: 0 22px !important;
    background: #111110 !important;
    border-right-color: #22201e;
    border-bottom-color: #302d2a;
    color: #847e78;
    font-size: 0.58rem;
    letter-spacing: 0.065em;
}

#single-ex-history-table-modal thead th:nth-child(1) {
    width: 30%;
    text-align: left !important;
}

#single-ex-history-table-modal thead th:nth-child(2) {
    width: 28%;
    text-align: right !important;
}

#single-ex-history-table-modal thead th:nth-child(3) {
    width: 42%;
    text-align: right !important;
}

#single-ex-history-table-body > tr,
#single-ex-history-table-body > tr:nth-child(even) {
    background: #0e0e0d !important;
}

#single-ex-history-table-body > tr:hover {
    background: #141312 !important;
}

#single-ex-history-table-body > tr > td {
    height: 49px;
    padding: 0 22px !important;
    background: transparent !important;
    border-right-color: #211f1d;
    border-bottom-color: #252321;
    color: #b1aba5 !important;
    font-size: 0.72rem;
    font-weight: 560;
}

#single-ex-history-table-body > tr > td:nth-child(1) {
    text-align: left !important;
    color: #8f8983 !important;
    font-size: 0.68rem;
}

#single-ex-history-table-body > tr > td:nth-child(2),
#single-ex-history-table-body > tr > td:nth-child(3) {
    text-align: right !important;
}

#single-ex-history-table-body span[style*="font-size: 0.75rem"] {
    margin-left: 6px;
    color: #5f5a55 !important;
    font-size: 0.58rem !important;
    font-weight: 500;
}

#single-ex-history-table-body span[style*="#4caf50"] {
    color: #5fbe8f !important;
}

#single-ex-history-table-body span[style*="#ff5252"] {
    color: #d96853 !important;
}

#single-ex-history-table-body > tr:last-child:not(:only-child) {
    background: #121210 !important;
    box-shadow: inset 0 1px 0 #34312e, 0 -8px 22px rgba(0, 0, 0, 0.3);
}

#single-ex-history-table-body > tr:last-child:not(:only-child):hover {
    background: #121210 !important;
}

#single-ex-history-table-body > tr:last-child:not(:only-child) > td {
    height: 54px;
    background: #121210 !important;
    border-bottom: 0;
    color: #e5e0dc !important;
    font-size: 0.71rem;
}

#single-ex-history-table-body > tr:last-child:not(:only-child) > td:first-child {
    color: #c8c2bc !important;
    font-size: 0.63rem;
    letter-spacing: 0.035em;
    text-align: center !important;
}

#detail-modal .modal-table-container thead th:first-child {
    text-align: center !important;
}

/* Single-exchange funding ledger: centered reading rhythm. */
#single-ex-history-table-modal > .modal-header {
    justify-content: center;
    padding-right: 56px !important;
    padding-left: 56px !important;
}

#single-ex-history-table-title {
    width: 100%;
    margin: 0;
    text-align: center;
}

#single-ex-history-table-modal table,
#single-ex-history-table-modal thead th,
#single-ex-history-table-modal thead th:nth-child(1),
#single-ex-history-table-modal thead th:nth-child(2),
#single-ex-history-table-modal thead th:nth-child(3),
#single-ex-history-table-body > tr > td,
#single-ex-history-table-body > tr > td:nth-child(1),
#single-ex-history-table-body > tr > td:nth-child(2),
#single-ex-history-table-body > tr > td:nth-child(3) {
    text-align: center !important;
}

@media (max-width: 760px) {
    #single-ex-history-table-overlay {
        align-items: flex-start;
    }

    #single-ex-history-table-modal > .modal-header {
        min-height: 58px;
        padding: 0 48px !important;
    }

    #single-ex-history-table-close {
        top: 14px;
        right: 12px;
    }
}
/* Campaign cards: exchange and reward-led hierarchy. */
#active-campaigns-grid {
    gap: 10px !important;
    padding-bottom: 11px !important;
}

#active-campaigns-grid .campaign-card {
    flex: 0 0 302px !important;
    min-height: 178px;
    grid-template-rows: 54px 1fr;
    background: #0d0d0c !important;
    border-color: #302d2a !important;
}

#active-campaigns-grid .campaign-card::before {
    content: none;
    display: none;
}

#active-campaigns-grid .campaign-card:hover {
    background: #0f0f0e !important;
    border-color: #514b46 !important;
}

#active-campaigns-grid .campaign-card-head {
    position: relative;
    padding: 0 18px;
    background: #111110;
    border-bottom-color: #2d2a27;
}

#active-campaigns-grid .campaign-card-head::after {
    content: '';
    width: 18px;
    height: 1px;
    position: absolute;
    right: 18px;
    bottom: -1px;
    background: #625a54;
}

#active-campaigns-grid .campaign-exchange {
    color: #f1ede9;
    font-size: 0.94rem;
    font-weight: 740;
    letter-spacing: -0.025em;
}

#active-campaigns-grid .campaign-card-body {
    grid-template-rows: 1fr auto;
    padding: 0 18px;
}

#active-campaigns-grid .campaign-reward {
    grid-row: 1;
    align-content: center;
    gap: 10px;
    padding: 14px 0 13px;
    border-top: 0;
}

#active-campaigns-grid .campaign-reward-head {
    min-height: 12px;
    align-items: baseline;
}

#active-campaigns-grid .campaign-reward .campaign-field-label {
    color: #817a74;
}

#active-campaigns-grid .campaign-note {
    padding-left: 8px;
    border-left: 1px solid #38332e;
    color: #a3885a;
    font-size: 0.41rem;
}

#active-campaigns-grid .campaign-reward > strong {
    color: #f5f1ed;
    font-size: 1.12rem;
    font-weight: 680;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

#active-campaigns-grid .campaign-action {
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 39px;
    padding: 0;
    border-top: 1px solid #292725;
}

#active-campaigns-grid .campaign-action .campaign-field-label {
    flex: 0 0 auto;
    color: #65605b;
}

#active-campaigns-grid .campaign-action strong {
    min-width: 0;
    color: #aaa49e;
    font-size: 0.64rem;
    font-weight: 620;
    text-align: right;
}

@media (max-width: 640px) {
    #active-campaigns-grid .campaign-card {
        flex-basis: 270px !important;
        min-height: 174px;
    }

    #active-campaigns-grid .campaign-card-head,
    #active-campaigns-grid .campaign-card-body {
        padding-inline: 15px;
    }
}
/* Stable funding card signals: increased legibility. */
.ticker-signal {
    gap: 13px;
    min-height: 36px;
}

.ticker-signal-item {
    min-width: 34px;
    gap: 6px;
    padding: 2px 1px;
}

.ticker-signal-divider {
    height: 32px;
}

.ticker-signal-value {
    font-size: 0.84rem;
    font-weight: 670;
}

.ticker-signal-key {
    font-size: 0.52rem;
    letter-spacing: 0.085em;
}
/* Markets typography: one deliberate scale across cards and table. */
#exchanges-dashboard-page {
    --markets-eyebrow: 0.6rem;
    --markets-caption: 0.53rem;
    --markets-body: 0.68rem;
    --markets-title: 1.14rem;
    --markets-reward: 1.06rem;
    --markets-metric: clamp(2.2rem, 3vw, 2.65rem);
}

#exchanges-dashboard-page .campaigns-title,
#exchanges-dashboard-page .market-stats-divider span {
    font-size: var(--markets-eyebrow);
    font-weight: 700;
    letter-spacing: 0.08em;
}

#active-campaigns-grid .campaign-exchange {
    font-size: var(--markets-title);
    font-weight: 720;
}

#active-campaigns-grid .campaign-field-label {
    font-size: var(--markets-caption);
    letter-spacing: 0.08em;
}

#active-campaigns-grid .campaign-note {
    font-size: 0.43rem;
}

#active-campaigns-grid .campaign-reward > strong {
    font-size: var(--markets-reward);
    font-weight: 670;
}

#active-campaigns-grid .campaign-action strong {
    font-size: var(--markets-body);
}

#exchanges-dashboard-page .ex-card-label {
    font-size: var(--markets-eyebrow);
    font-weight: 700;
    letter-spacing: 0.075em;
}

#exchanges-dashboard-page .ex-card-label-number {
    top: 0;
    font-size: 1em;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

#exchanges-dashboard-page .ex-card-value,
#exchanges-dashboard-page .supported-exchanges-card .ex-card-value {
    margin-top: 12px;
    font-size: var(--markets-metric);
    font-weight: 610;
    line-height: 0.96;
    letter-spacing: -0.045em;
}

#exchanges-dashboard-page .supported-exchanges-card .ex-card-value {
    margin-block: 12px 0;
}

#exchanges-dashboard-page .ex-card-change {
    font-size: var(--markets-body) !important;
    font-weight: 650 !important;
}

#exchanges-dashboard-page #ex-type-filters .pill {
    font-size: 0.64rem;
    font-weight: 680;
    letter-spacing: 0;
}

#exchanges-dashboard-page #ex-table-search-input {
    font-size: var(--markets-body);
    font-weight: 520;
}

#exchanges-dashboard-page #exchanges-metrics-table thead th {
    font-family: var(--font-sans);
    font-size: 0.57rem !important;
    font-weight: 700;
    letter-spacing: 0.065em;
}

#exchanges-dashboard-page #exchanges-metrics-tbody td {
    font-size: var(--markets-body) !important;
    font-weight: 560 !important;
}

#exchanges-dashboard-page #exchanges-metrics-tbody td:nth-child(1) span:first-child {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
}

#exchanges-dashboard-page #exchanges-metrics-tbody td span[style*="font-size: 0.8rem"] {
    font-size: 0.61rem !important;
    font-weight: 620 !important;
}

#exchanges-dashboard-page #exchanges-metrics-table .ex-badge,
#exchanges-dashboard-page #exchanges-metrics-table .token-tag {
    font-size: 0.52rem !important;
    font-weight: 680;
}

#exchanges-dashboard-page #exchanges-metrics-table a[style] {
    font-size: 0.62rem !important;
    font-weight: 650 !important;
}

@media (max-width: 900px) {
    #exchanges-dashboard-page {
        --markets-metric: clamp(2.1rem, 7vw, 2.5rem);
    }
}

/* Campaign reward cadence marker. */
#active-campaigns-grid .campaign-note {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: 0 8px;
    border: 1px solid rgba(163, 136, 90, 0.38);
    background: #12100c;
    color: #a3885a;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.075em;
    white-space: nowrap;
}

/* Exchange rewards section frame. */
#exchanges-dashboard-page .ex-dashboard-container {
    padding-top: 16px !important;
}

#exchanges-dashboard-page .active-campaigns-section {
    margin-bottom: 14px !important;
    padding: 0 18px 14px;
    background: #0a0a09;
    border: 1px solid #252320;
}

#exchanges-dashboard-page .campaigns-heading {
    min-height: 64px;
    margin: 0 0 14px !important;
    padding: 0;
    border-bottom-color: #302d29;
}

#exchanges-dashboard-page .campaigns-heading-copy {
    display: grid;
    gap: 8px;
}

#exchanges-dashboard-page .campaigns-title {
    color: #d8d3ce;
    font-size: 0.92rem;
    font-weight: 720;
    line-height: 1;
    letter-spacing: 0.025em;
}

#exchanges-dashboard-page .campaigns-subtitle {
    color: #716b65;
    font-family: var(--font-sans);
    font-size: 0.56rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

#exchanges-dashboard-page .active-campaigns-section .table-scroll-wrapper {
    margin: 0;
}

@media (max-width: 640px) {
    #exchanges-dashboard-page .active-campaigns-section {
        padding-inline: 12px;
    }

    #exchanges-dashboard-page .campaigns-title {
        font-size: 0.84rem;
    }
}

/* Supported exchanges: total plus venue-type ledger. */
#exchanges-dashboard-page .supported-exchanges-card {
    display: flex;
    padding: 18px 18px 0 !important;
}

#exchanges-dashboard-page .supported-exchanges-total {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 18px;
}

#exchanges-dashboard-page .supported-exchanges-card .ex-card-value {
    margin: 0;
    font-size: clamp(2.8rem, 3.7vw, 3.6rem);
    line-height: 0.82;
}

#exchanges-dashboard-page .supported-exchanges-total-label {
    padding-bottom: 3px;
    color: #5f5b57;
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.09em;
}

#exchanges-dashboard-page .supported-exchanges-breakdown {
    min-height: 52px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: auto -18px 0;
    border-top: 1px solid #292725;
    background: #0f0f0e;
}

#exchanges-dashboard-page .supported-exchanges-type {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 18px;
}

#exchanges-dashboard-page .supported-exchanges-type + .supported-exchanges-type {
    border-left: 1px solid #292725;
}

#exchanges-dashboard-page .supported-exchanges-type span {
    color: #716b65;
    font-family: var(--font-sans);
    font-size: 0.55rem;
    font-weight: 680;
    letter-spacing: 0.08em;
}

#exchanges-dashboard-page .supported-exchanges-type strong {
    color: #d8d3ce;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 650;
    line-height: 1;
}

/* Hallmark · component: asset-pair modal · genre: modern-minimal · theme: existing FomoHub system
 * Hallmark pre-emit critique: P5 H5 E5 S5 R5 V4
 * states: default · hover · focus · active · disabled
 * contrast: pass · motion: restrained
 */
#detail-modal #modal-close {
    width: 44px;
    height: 44px;
    right: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 500;
    transition:
        background-color 130ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 130ms cubic-bezier(0.16, 1, 0.3, 1),
        color 130ms cubic-bezier(0.16, 1, 0.3, 1);
}

#detail-modal #modal-close:hover {
    background: var(--bg-active);
    border: 1px solid var(--negative-dim);
    color: var(--negative);
}

#detail-modal #modal-close:focus-visible {
    outline: 2px solid var(--negative);
    outline-offset: 2px;
}

#detail-modal #modal-close:active {
    transform: translateY(-50%);
    background: var(--bg-active);
    border-color: var(--negative-dim);
}

#detail-modal #modal-close:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

#detail-modal .modal-arb-pair {
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 146px;
    min-height: 124px;
}

#detail-modal .modal-arb-leg,
#detail-modal .modal-arb-leg.leg-long,
#detail-modal .modal-arb-leg.leg-short {
    min-height: 124px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: stretch;
    gap: 12px;
    padding: 16px 20px;
    border-top: 0;
    border-left: 0;
}

#detail-modal .modal-arb-leg.leg-long {
    background: var(--bg-secondary);
}

#detail-modal .modal-arb-leg.leg-short {
    background: var(--bg-secondary);
}

#detail-modal .modal-arb-leg-head {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 28px;
}

#detail-modal .modal-arb-leg-interval {
    margin-left: auto;
    padding-left: 8px;
    border-left: 1px solid var(--border-primary);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

#detail-modal .modal-arb-leg-exchange {
    max-width: 100%;
    align-self: center;
    color: var(--text-primary);
    font-size: 1.03rem;
    font-weight: 700;
    line-height: 1.15;
}

#detail-modal .modal-arb-leg-metric {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
}

#detail-modal .modal-arb-leg-metric-label {
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.54rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

#detail-modal .modal-arb-leg-rate {
    font-size: 0.92rem;
    font-weight: 620;
    line-height: 1;
    letter-spacing: -0.025em;
}

#detail-modal .leg-long .modal-arb-leg-rate {
    color: var(--positive);
}

#detail-modal .leg-short .modal-arb-leg-rate {
    color: var(--negative);
}

#detail-modal .modal-arb-vs {
    min-height: 124px;
}

#detail-modal .modal-arb-apr {
    min-height: 124px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
}

#detail-modal .modal-arb-apr-label {
    margin: 0 0 8px;
}

#detail-modal .modal-arb-apr-value {
    font-size: 1.2rem;
    line-height: 1;
}

#detail-modal .modal-ex-link::after {
    content: none;
    display: none;
}

#detail-modal .modal-ex-link {
    border-bottom: 1px solid transparent;
    transition:
        border-color 130ms cubic-bezier(0.16, 1, 0.3, 1),
        color 130ms cubic-bezier(0.16, 1, 0.3, 1);
}

#detail-modal .modal-ex-link:hover {
    border-bottom-color: var(--text-muted);
    color: var(--text-primary);
}

@media (max-width: 820px) {
    #detail-modal .modal-arb-pair {
        grid-template-columns: 1fr;
    }

    #detail-modal .modal-arb-vs {
        min-height: 34px;
    }

    #detail-modal .modal-arb-apr {
        min-height: 92px;
    }
}
/* Asset pair density correction after visual QA. */
#detail-modal .modal-arb-leg {
    justify-items: stretch;
    text-align: left;
}

#detail-modal .modal-arb-leg-head,
#detail-modal .modal-arb-leg-exchange,
#detail-modal .modal-arb-leg-metric {
    width: 100%;
    justify-self: stretch;
}

#detail-modal .modal-arb-leg-exchange {
    text-align: left;
}
/* Keep the position-card grid track full-width. */
#detail-modal .modal-arb-leg,
#detail-modal .modal-arb-leg.leg-long,
#detail-modal .modal-arb-leg.leg-short {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
}
/* Realized-spread ledger: quiet centered header. */
#history-table-modal::before {
    content: none !important;
    display: none !important;
}

#history-table-modal > .modal-header {
    justify-content: center;
    padding-right: 58px !important;
    padding-left: 58px !important;
}

#history-table-title {
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: center;
}

@media (max-width: 760px) {
    #history-table-modal > .modal-header {
        padding-right: 48px !important;
        padding-left: 48px !important;
    }
}


/* ===== Unified Back control - compact outlined button ===== */
:is(
    #strategy-overlay #strategy-back,
    #backtest-overlay #backtest-back,
    #single-ex-modal #single-ex-back
) {
    width: auto !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    gap: 8px !important;
    padding: 0 16px !important;
    position: relative;
    border: 1px solid var(--border-primary) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
    font-family: var(--font-sans) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 150ms cubic-bezier(0.16, 1, 0.3, 1),
        color 150ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 100ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#strategy-overlay #strategy-back,
#single-ex-modal #single-ex-back {
    margin: 0 0 0 16px !important;
}

#backtest-overlay #backtest-back {
    margin: 0 !important;
}

:is(
    #strategy-overlay #strategy-back,
    #backtest-overlay #backtest-back,
    #single-ex-modal #single-ex-back
)::before,
:is(
    #strategy-overlay #strategy-back,
    #backtest-overlay #backtest-back,
    #single-ex-modal #single-ex-back
)::after {
    content: none !important;
    display: none !important;
}

:is(
    #strategy-overlay #strategy-back,
    #backtest-overlay #backtest-back,
    #single-ex-modal #single-ex-back
) svg {
    width: 15px !important;
    height: 15px !important;
    box-sizing: border-box !important;
    flex: 0 0 15px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: currentColor !important;
    transform: none !important;
    stroke-width: 1.6;
    transition: none !important;
}

@media (hover: hover) {
    :is(
        #strategy-overlay #strategy-back,
        #backtest-overlay #backtest-back,
        #single-ex-modal #single-ex-back
    ):hover {
        border-color: var(--text-tertiary) !important;
        background: var(--bg-hover) !important;
        color: var(--text-primary) !important;
    }
}

:is(
    #strategy-overlay #strategy-back,
    #backtest-overlay #backtest-back,
    #single-ex-modal #single-ex-back
):focus-visible {
    outline: 2px solid var(--text-secondary) !important;
    outline-offset: 2px !important;
}

:is(
    #strategy-overlay #strategy-back,
    #backtest-overlay #backtest-back,
    #single-ex-modal #single-ex-back
):active {
    background: var(--bg-active) !important;
    color: var(--text-primary) !important;
    transform: translateY(1px);
}

:is(
    #strategy-overlay #strategy-back,
    #backtest-overlay #backtest-back,
    #single-ex-modal #single-ex-back
):disabled {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 640px) {
    :is(
        #strategy-overlay #strategy-back,
        #backtest-overlay #backtest-back,
        #single-ex-modal #single-ex-back
    ) {
        width: auto !important;
        min-width: 0 !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 12px !important;
        font-size: 0.66rem !important;
    }

    #strategy-overlay #strategy-back,
    #single-ex-modal #single-ex-back {
        margin-left: 8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(
        #strategy-overlay #strategy-back,
        #backtest-overlay #backtest-back,
        #single-ex-modal #single-ex-back
    ) {
        transition: none !important;
    }
}

/* Hallmark · Yield Calculator refinement
 * macrostructure: focused component playground · theme: existing FomoHub workbench
 * pre-emit critique: P5 H5 E5 S5 R5 V5 · layout-only · calculator logic unchanged
 */
#yield-calculator-page .yield-shell {
    width: min(100%, 1240px);
    max-width: none;
    margin-inline: auto;
    padding: clamp(32px, 4vw, 56px) clamp(16px, 3vw, 32px) 80px;
}

#yield-calculator-page .yield-page-header {
    width: min(100%, 960px);
    max-width: none;
    margin: 0 auto 24px;
}

#yield-calculator-page .yield-page-header h1 {
    font-size: clamp(2.35rem, 4.6vw, 3.45rem);
    line-height: 1;
    letter-spacing: -0.05em;
}

#yield-calculator-page .yield-protocol-section {
    width: 100%;
    margin: 0 auto 28px;
}

#yield-calculator-page .yield-protocol-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    overflow: visible;
}

#yield-calculator-page .yield-protocol-button {
    flex: 1 1 128px;
    max-width: 152px;
    min-width: 120px;
    min-height: 56px;
    gap: 8px;
    padding-inline: 12px;
    overflow: hidden;
    border-color: var(--color-yield-rule-strong);
    border-radius: 0;
    background: var(--color-yield-surface);
    color: var(--color-yield-ink-soft);
    font-size: 0.84rem;
    text-overflow: ellipsis;
}

#yield-calculator-page .yield-protocol-button .ex-logo {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
}

#yield-calculator-page .yield-protocol-button.is-active {
    border-color: var(--color-yield-accent);
    background: var(--color-yield-accent-quiet);
    color: var(--color-yield-ink);
}

#yield-calculator-page .yield-calculator-card {
    width: min(100%, 960px);
    margin-inline: auto;
    overflow: clip;
    border-color: var(--color-yield-rule-strong);
    border-radius: 2px;
    background: var(--color-yield-surface);
    color: var(--color-yield-ink);
}

#yield-calculator-page .yield-card-header {
    justify-content: flex-start;
    padding: 24px clamp(20px, 4vw, 40px);
    border-block-end: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-card-identity {
    width: min(100%, 720px);
    margin-inline: auto;
    gap: 12px;
}

#yield-calculator-page .yield-card-logo {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 2px;
    background: var(--color-yield-paper);
}

#yield-calculator-page .yield-card-logo .ex-logo {
    width: 30px;
    height: 30px;
}

#yield-calculator-page .yield-card-identity h2 {
    font-size: 1.18rem;
    letter-spacing: -0.02em;
}

#yield-calculator-page .yield-point-model {
    border-block-start: 0;
    background: var(--color-yield-surface);
}

#yield-calculator-page .yield-point-inputs {
    width: min(100%, 720px);
    max-width: none;
    margin-inline: auto;
    padding: clamp(28px, 4vw, 44px) 0 32px;
    gap: 24px;
    background: transparent;
}

#yield-calculator-page .yield-point-field {
    gap: 10px;
}

#yield-calculator-page .yield-point-field-label,
#yield-calculator-page .yield-point-field > label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

#yield-calculator-page .yield-point-presets {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

#yield-calculator-page .yield-point-presets button {
    min-height: 52px;
    border-radius: 0;
    background: var(--color-yield-paper);
    color: var(--color-yield-ink-soft);
    font-size: 0.82rem;
}

#yield-calculator-page .yield-point-input-wrap {
    min-height: 64px;
    border-radius: 0;
    background: var(--color-yield-paper);
}

#yield-calculator-page .yield-point-input-wrap input {
    height: 62px;
    font-size: 1.08rem;
}

#yield-calculator-page .yield-point-estimate {
    margin-block-start: 4px;
    padding: 28px 0 4px;
    border: 0;
    border-block-start: var(--rule-yield) solid var(--color-yield-rule);
    border-radius: 0;
    background: transparent;
    text-align: center;
}

#yield-calculator-page .yield-point-estimate > span {
    display: block;
    color: var(--color-yield-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

#yield-calculator-page .yield-point-estimate > strong {
    margin-block-start: 12px;
    color: var(--color-yield-ink);
    font-size: clamp(2.5rem, 5vw, 3.6rem);
    line-height: 0.95;
}

#yield-calculator-page .yield-point-estimate[data-tone="positive"] > strong {
    color: var(--color-yield-card-accent);
}

#yield-calculator-page .yield-point-estimate > p {
    margin-block-start: 12px;
    color: var(--color-yield-muted);
}

#yield-calculator-page .yield-point-actions {
    grid-template-columns: minmax(160px, 0.34fr) minmax(260px, 0.66fr);
    width: min(100%, 720px);
    margin-inline: auto;
    padding: 24px 0 12px;
    border-block-start: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-point-actions .yield-share-trigger,
#yield-calculator-page .yield-point-actions .yield-open-protocol {
    min-height: 54px;
    border-radius: 0;
    white-space: nowrap;
}

#yield-calculator-page .yield-point-disclaimer {
    width: min(100%, 720px);
    margin-inline: auto;
    padding: 0 0 28px;
    color: var(--color-yield-muted);
    text-align: center;
}

#yield-calculator-page .yield-protocol-button:focus-visible,
#yield-calculator-page .yield-point-presets button:focus-visible,
#yield-calculator-page .yield-point-actions .yield-share-trigger:focus-visible,
#yield-calculator-page .yield-point-actions .yield-open-protocol:focus-visible {
    outline: 2px solid var(--color-yield-focus);
    outline-offset: 2px;
}

#yield-calculator-page .yield-point-actions :is(button, a):active {
    transform: translateY(1px);
}

#yield-calculator-page .yield-point-actions :is(button, a):disabled,
#yield-calculator-page .yield-point-actions [aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
    #yield-calculator-page .yield-protocol-button:hover,
    #yield-calculator-page .yield-point-presets button:hover {
        background: var(--color-yield-surface-hover);
        color: var(--color-yield-ink);
    }

    #yield-calculator-page .yield-protocol-button.is-active:hover {
        background: var(--color-yield-accent-quiet);
        color: var(--color-yield-ink);
    }
}

@media (max-width: 63.99rem) {
    #yield-calculator-page .yield-shell {
        width: min(100%, 800px);
    }

    #yield-calculator-page .yield-protocol-button {
        flex-basis: calc(25% - 6px);
        max-width: none;
    }

    #yield-calculator-page .yield-point-inputs,
    #yield-calculator-page .yield-point-actions,
    #yield-calculator-page .yield-point-disclaimer {
        width: calc(100% - 48px);
    }
}

@media (max-width: 39.99rem) {
    #yield-calculator-page .yield-shell {
        width: 100%;
        padding: 28px 12px 56px;
    }

    #yield-calculator-page .yield-page-header {
        margin-block-end: 20px;
    }

    #yield-calculator-page .yield-page-header h1 {
        font-size: clamp(2rem, 12vw, 2.75rem);
    }

    #yield-calculator-page .yield-protocol-section {
        margin-block-end: 20px;
    }

    #yield-calculator-page .yield-protocol-button {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        max-width: none;
        min-height: 52px;
        justify-content: flex-start;
        padding-inline: 12px;
        font-size: 0.78rem;
    }

    #yield-calculator-page .yield-protocol-button .ex-logo {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
    }

    #yield-calculator-page .yield-calculator-card {
        border-radius: 0;
    }

    #yield-calculator-page .yield-card-header {
        padding: 20px;
    }

    #yield-calculator-page .yield-card-identity {
        gap: 12px;
    }

    #yield-calculator-page .yield-card-logo {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    #yield-calculator-page .yield-point-inputs,
    #yield-calculator-page .yield-point-actions,
    #yield-calculator-page .yield-point-disclaimer {
        width: calc(100% - 32px);
    }

    #yield-calculator-page .yield-point-inputs {
        padding-block: 24px;
        gap: 20px;
    }

    #yield-calculator-page .yield-point-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #yield-calculator-page .yield-point-presets button:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    #yield-calculator-page .yield-point-estimate {
        padding-block-start: 24px;
    }

    #yield-calculator-page .yield-point-actions {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding-block-start: 20px;
    }

    #yield-calculator-page .yield-point-disclaimer {
        padding-block: 4px 24px;
        text-align: start;
    }
}

@media (max-width: 22rem) {
    #yield-calculator-page .yield-protocol-list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    #yield-calculator-page .yield-protocol-button,
    #yield-calculator-page .yield-point-presets button,
    #yield-calculator-page .yield-point-actions :is(button, a),
    #yield-calculator-page .yield-point-input-wrap {
        transition-duration: 0.01ms !important;
    }
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * component: point value model · theme: studied-DNA (user reference) · slop: pass · responsive: pass
 * The legacy calculator remains inert for rollback safety; only the point model is rendered.
 */
#yield-calculator-page .yield-legacy-calculator[hidden] {
    display: none !important;
}

#yield-calculator-page .yield-point-model {
    min-width: 0;
    display: block;
    border-block-start: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-point-overview,
#yield-calculator-page .yield-point-inputs {
    min-width: 0;
    padding: var(--space-yield-8);
}

#yield-calculator-page .yield-point-overview {
    border-inline-end: var(--rule-yield) solid var(--color-yield-rule);
    background: var(--color-yield-paper);
}

#yield-calculator-page .yield-point-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--space-yield-5);
    max-width: 880px;
    margin-inline: auto;
    background: var(--color-yield-surface);
}

#yield-calculator-page .yield-point-reference {
    width: fit-content;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-yield-2);
    padding-inline: var(--space-yield-3);
    border: var(--rule-yield) solid var(--color-yield-card-accent-strong);
    border-radius: var(--radius-yield-card-inner);
    background: var(--color-yield-card-accent-quiet);
    color: var(--color-yield-card-accent);
    font-size: var(--text-yield-xs);
    font-weight: 750;
    line-height: 1;
}

#yield-calculator-page .yield-point-hero {
    margin-block: var(--space-yield-8);
}

#yield-calculator-page .yield-point-hero > span,
#yield-calculator-page .yield-point-scenarios-head,
#yield-calculator-page .yield-point-estimate > span {
    color: var(--color-yield-muted);
    font-size: var(--text-yield-sm);
    font-weight: 700;
}

#yield-calculator-page .yield-point-hero > strong {
    display: block;
    margin-block-start: var(--space-yield-2);
    color: var(--color-yield-card-accent);
    font-family: var(--font-yield-display);
    font-size: clamp(2.8rem, 7vw, 4.8rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.055em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

#yield-calculator-page .yield-point-hero > p {
    margin: var(--space-yield-3) 0 0;
    color: var(--color-yield-faint);
    font-size: var(--text-yield-sm);
    line-height: 1.5;
}

#yield-calculator-page .yield-point-scenarios {
    padding-block-start: var(--space-yield-5);
    border-block-start: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-point-scenarios-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-yield-3);
    margin-block-end: var(--space-yield-4);
}

#yield-calculator-page .yield-point-scenario-bars {
    display: grid;
    gap: var(--space-yield-3);
}

#yield-calculator-page .yield-point-scenario-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 72px minmax(80px, 1fr) minmax(76px, auto);
    align-items: center;
    gap: var(--space-yield-3);
    color: var(--color-yield-muted);
    font-family: var(--font-yield-data);
    font-size: var(--text-yield-sm);
    font-variant-numeric: tabular-nums;
}

#yield-calculator-page .yield-point-scenario-row > strong {
    color: inherit;
    font-weight: 750;
    text-align: end;
    white-space: nowrap;
}

#yield-calculator-page .yield-point-scenario-track {
    min-width: 0;
    height: 11px;
    overflow: hidden;
    border-radius: var(--radius-yield-card-inner);
    background: var(--color-yield-card-track);
}

#yield-calculator-page .yield-point-scenario-track > i {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--color-yield-card-accent-strong);
    transform: scaleX(var(--yield-bar-scale, 0));
    transform-origin: left center;
    transition: transform var(--dur-yield-medium) var(--ease-yield-out), background-color var(--dur-yield-short) var(--ease-yield-out);
}

#yield-calculator-page .yield-point-scenario-row.is-target {
    color: var(--color-yield-ink);
    font-weight: 750;
}

#yield-calculator-page .yield-point-scenario-row.is-target .yield-point-scenario-track > i {
    background: var(--color-yield-card-accent);
}

#yield-calculator-page .yield-point-field {
    display: grid;
    gap: var(--space-yield-2);
}

#yield-calculator-page .yield-point-field > label {
    color: var(--color-yield-ink);
    font-family: var(--font-yield-display);
    font-size: var(--text-yield-sm);
    font-weight: 750;
}

#yield-calculator-page .yield-point-field-label {
    color: var(--color-yield-ink);
    font-family: var(--font-yield-display);
    font-size: var(--text-yield-sm);
    font-weight: 750;
}

#yield-calculator-page .yield-point-field > p {
    margin: 0;
    color: var(--color-yield-faint);
    font-size: var(--text-yield-xs);
    line-height: 1.45;
}

#yield-calculator-page .yield-point-input-wrap {
    min-width: 0;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: var(--space-yield-2);
    padding-inline: var(--space-yield-4);
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: var(--radius-yield-card-inner);
    outline: 2px solid transparent;
    outline-offset: 1px;
    background: var(--color-yield-paper);
    color: var(--color-yield-muted);
    transition: border-color var(--dur-yield-short) var(--ease-yield-out), background-color var(--dur-yield-short) var(--ease-yield-out);
}

#yield-calculator-page .yield-point-input-wrap:focus-within {
    border-color: var(--color-yield-card-accent-strong);
    outline-color: var(--color-yield-focus);
}

#yield-calculator-page .yield-point-input-wrap:has(input[aria-invalid="true"]) {
    border-color: var(--color-yield-error);
}

#yield-calculator-page .yield-point-input-wrap input {
    min-width: 0;
    width: 100%;
    height: 56px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-yield-ink);
    font-family: var(--font-yield-data);
    font-size: 1.12rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

#yield-calculator-page .yield-point-input-wrap input::placeholder {
    color: var(--color-yield-faint);
    opacity: 1;
}

#yield-calculator-page .yield-point-presets {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-yield-2);
}

#yield-calculator-page .yield-point-presets button {
    min-width: 0;
    min-height: 42px;
    padding-inline: var(--space-yield-2);
    overflow: hidden;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: var(--radius-yield-card-inner);
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: var(--color-yield-surface-raised);
    color: var(--color-yield-muted);
    font-family: var(--font-yield-data);
    font-size: var(--text-yield-sm);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--dur-yield-short) var(--ease-yield-out), background-color var(--dur-yield-short) var(--ease-yield-out), color var(--dur-yield-short) var(--ease-yield-out), transform var(--dur-yield-instant) var(--ease-yield-out);
}

#yield-calculator-page .yield-point-presets button.is-active {
    border-color: var(--color-yield-card-accent-strong);
    background: var(--color-yield-card-accent-quiet);
    color: var(--color-yield-card-accent);
}

#yield-calculator-page .yield-point-presets button[data-state="error"] {
    border-color: var(--color-yield-error);
    color: var(--color-yield-error);
}

#yield-calculator-page .yield-point-presets button:focus-visible {
    outline-color: var(--color-yield-focus);
}

#yield-calculator-page .yield-point-presets button:active {
    transform: translateY(1px);
}

#yield-calculator-page .yield-point-presets button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

#yield-calculator-page .yield-point-model-note {
    width: fit-content;
    margin: var(--space-yield-1) 0 0;
    padding: var(--space-yield-2) var(--space-yield-3);
    border: var(--rule-yield) solid var(--warning);
    border-radius: var(--radius-yield-card-inner);
    background: transparent;
    color: var(--warning);
    font-size: var(--text-yield-xs);
    font-weight: 700;
    line-height: 1.4;
}

#yield-calculator-page .yield-point-model-note[hidden] {
    display: none !important;
}

#yield-calculator-page .yield-point-estimate {
    margin-block-start: var(--space-yield-1);
    padding: var(--space-yield-4);
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: var(--radius-yield-card-inner);
    background: var(--color-yield-surface-raised);
}

#yield-calculator-page .yield-point-estimate > strong {
    display: block;
    margin-block-start: var(--space-yield-2);
    color: var(--color-yield-ink);
    font-family: var(--font-yield-display);
    font-size: clamp(1.9rem, 4vw, 2.4rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

#yield-calculator-page .yield-point-estimate[data-tone="positive"] > strong {
    color: var(--color-yield-card-accent);
}

#yield-calculator-page .yield-point-estimate > p {
    margin: var(--space-yield-2) 0 0;
    color: var(--color-yield-faint);
    font-size: var(--text-yield-sm);
    line-height: 1.45;
}

#yield-calculator-page .yield-point-actions {
    display: grid;
    grid-template-columns: minmax(150px, 0.28fr) minmax(240px, 0.72fr);
    gap: var(--space-yield-3);
    padding: var(--space-yield-6) var(--space-yield-8) var(--space-yield-3);
    border-block-start: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-point-actions .yield-share-trigger,
#yield-calculator-page .yield-point-actions .yield-open-protocol {
    width: 100%;
    min-height: 54px;
    border-radius: var(--radius-yield-card-inner);
}

#yield-calculator-page .yield-point-disclaimer {
    margin: 0;
    padding: var(--space-yield-2) var(--space-yield-8) var(--space-yield-6);
    color: var(--color-yield-faint);
    font-size: var(--text-yield-xs);
    line-height: 1.5;
}

@media (hover: hover) and (pointer: fine) {
    #yield-calculator-page .yield-point-presets button:hover {
        border-color: var(--color-yield-card-accent-strong);
        color: var(--color-yield-ink);
    }
}

@media (max-width: 63.99rem) {
    #yield-calculator-page .yield-point-model {
        grid-template-columns: minmax(0, 1fr);
    }

    #yield-calculator-page .yield-point-overview {
        border-inline-end: 0;
        border-block-end: var(--rule-yield) solid var(--color-yield-rule);
    }

    #yield-calculator-page .yield-point-estimate {
        margin-block-start: 0;
    }
}

@media (max-width: 39.99rem) {
    #yield-calculator-page .yield-point-overview,
    #yield-calculator-page .yield-point-inputs {
        padding: var(--space-yield-5) var(--space-yield-4);
    }

    #yield-calculator-page .yield-point-hero {
        margin-block: var(--space-yield-6);
    }

    #yield-calculator-page .yield-point-scenario-row {
        grid-template-columns: 58px minmax(52px, 1fr) minmax(62px, auto);
        gap: var(--space-yield-2);
        font-size: var(--text-yield-xs);
    }

    #yield-calculator-page .yield-point-presets {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #yield-calculator-page .yield-point-presets button:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    #yield-calculator-page .yield-point-actions {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--space-yield-5) var(--space-yield-4) var(--space-yield-3);
    }

    #yield-calculator-page .yield-point-disclaimer {
        padding: var(--space-yield-2) var(--space-yield-4) var(--space-yield-5);
    }
}

@media (pointer: coarse) {
    #yield-calculator-page .yield-point-presets button {
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #yield-calculator-page .yield-point-scenario-track > i,
    #yield-calculator-page .yield-point-presets button,
    #yield-calculator-page .yield-point-input-wrap {
        transition-duration: 0.01ms !important;
    }
}

/* Hallmark - pre-emit critique: P5 H5 E5 S5 R5 V5 */
:root {
    --color-accent-ink: var(--bg-primary);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in: cubic-bezier(0.7, 0, 0.84, 1);
}

/* Detail-ledger timeframe controls */
#history-table-modal > .modal-header,
#single-ex-history-table-modal > .modal-header {
    min-height: 108px;
    padding: 16px 60px !important;
    align-items: center !important;
}

.history-modal-heading {
    min-width: 0;
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 12px;
}

.history-modal-heading .modal-title {
    max-width: 100%;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 1.02rem !important;
    font-weight: 680 !important;
    line-height: 1.25;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-timeframe-selector {
    min-height: 44px;
    display: inline-grid;
    grid-template-columns: repeat(4, minmax(48px, 1fr));
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.history-timeframe-btn {
    min-width: 48px;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-right: 1px solid var(--border-subtle);
    outline: 2px solid transparent;
    outline-offset: 1px;
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition:
        background-color 150ms var(--ease-out),
        color 150ms var(--ease-out),
        transform 100ms var(--ease-out);
}

.history-timeframe-btn:last-child {
    border-right: 0;
}

.history-timeframe-btn.active,
.history-timeframe-btn[aria-pressed="true"] {
    background: var(--accent);
    color: var(--color-accent-ink);
}

.history-timeframe-btn:focus-visible {
    outline-color: var(--text-secondary);
    outline-offset: 2px;
    position: relative;
    z-index: 2;
}

.history-timeframe-btn:active {
    transform: translateY(1px);
}

.history-timeframe-btn:disabled,
.history-timeframe-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.history-timeframe-btn[data-state="loading"] {
    color: var(--text-muted);
}

.history-timeframe-btn[data-state="error"] {
    color: var(--negative);
}

.history-timeframe-btn[data-state="success"].active {
    background: var(--positive);
    color: var(--bg-primary);
}

@media (hover: hover) {
    .history-timeframe-btn:hover:not(:disabled):not(.active) {
        background: var(--bg-hover);
        color: var(--text-primary);
    }
}

/* Funding-page campaign notice */
.campaign-notice {
    position: fixed;
    z-index: 3500;
    top: auto;
    right: var(--space-lg);
    /* The footer is fixed at the bottom, so the notice has to clear its full height
       or it covers the Telegram / X row. Tracking --footer-height keeps them in step
       if the footer is ever resized. */
    bottom: calc(var(--footer-height) + max(var(--space-lg), env(safe-area-inset-bottom)) + 40px);
    width: min(390px, calc(100vw - 36px));
    min-height: 154px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-rows: 1fr 44px;
    gap: 0 12px;
    padding: 18px 18px 16px;
    border: 1px solid var(--border-primary);
    border-left: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    animation: campaign-notice-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.campaign-notice.hidden {
    display: none;
}

.campaign-notice-mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    grid-row: 1;
    align-self: start;
    margin-top: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 1.15rem;
    font-weight: 800;
}

.campaign-notice-mark:not(.has-logo) {
    border: 1px solid var(--border-primary);
    background: var(--bg-elevated);
}

.campaign-notice-mark .ex-logo {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.campaign-notice-copy {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 3px;
    padding-right: 28px;
}

.campaign-notice-label {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.52rem;
    font-weight: 650;
    letter-spacing: 0.1em;
}

.campaign-notice-copy strong {
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-notice-copy p {
    overflow: hidden;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.campaign-notice-copy > span:last-child {
    color: var(--text-tertiary);
    font-size: 0.68rem;
}

.campaign-notice-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    outline: 2px solid transparent;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
}

.campaign-notice-close svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 1.5;
}

.campaign-notice-close:focus-visible,
.campaign-notice-cta:focus-visible {
    outline: 2px solid var(--text-secondary);
    outline-offset: 2px;
}

.campaign-notice-close:active,
.campaign-notice-cta:active {
    transform: translateY(1px);
}

.campaign-notice-close:disabled,
.campaign-notice-cta[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.campaign-notice-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 1 / -1;
    align-self: end;
    margin-top: 12px;
    border: 1px solid var(--border-primary);
    outline: 2px solid transparent;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 720;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition:
        background-color 150ms var(--ease-out),
        border-color 150ms var(--ease-out),
        color 150ms var(--ease-out),
        transform 100ms var(--ease-out);
}

.campaign-notice[data-state="loading"] .campaign-notice-cta {
    color: var(--text-muted);
}

.campaign-notice[data-state="error"] {
    border-left-color: var(--negative);
}

.campaign-notice[data-state="success"] {
    border-left-color: var(--positive);
}

@media (hover: hover) {
    .campaign-notice-close:hover {
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    .campaign-notice-cta:hover {
        border-color: var(--text-tertiary);
        background: var(--bg-hover);
        color: var(--text-primary);
    }
}

@keyframes campaign-notice-in {
    from {
        opacity: 0;
        transform: translate3d(36px, 8px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes campaign-notice-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* Stable-card realized average: typographic marker, not another framed badge. */
#anomaly-ticker .ticker-card .ticker-realized-avg {
    top: 52%;
    height: auto;
    min-height: 0;
    gap: 8px;
    padding: 3px 7px;
    border: 0;
    background: var(--bg-primary);
    color: var(--text-secondary);
    box-shadow: none;
}

#anomaly-ticker .ticker-card .ticker-realized-period {
    padding-right: 7px;
    border-right: 1px solid var(--border-primary);
    color: var(--accent);
    font-size: 0.56rem;
    font-weight: 760;
}

#anomaly-ticker .ticker-card .ticker-realized-label {
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.54rem;
    font-weight: 680;
    letter-spacing: 0.07em;
}

#anomaly-ticker .ticker-card .ticker-realized-value {
    color: var(--text-primary);
    font-size: 0.67rem;
    font-weight: 680;
}

@media (hover: hover) {
    #anomaly-ticker .ticker-card:hover .ticker-realized-avg {
        border: 0;
        background: var(--bg-primary);
        color: var(--text-primary);
    }
}

/* Hallmark component: points economics workbench
 * audience: points farmers; task: price campaign economics before or after farming
 * tone: restrained technical; anchor: warm red; macrostructure: split-ledger workbench
 * pre-emit critique: P5 H5 E5 S5 R5 V5; contrast: pass; honest inputs: pass; reduced motion: pass
 */
/* Yield Calculator */
.yield-calculator-page {
    width: 100%;
    padding: 30px 20px 72px;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.yield-shell {
    width: min(1180px, 100%);
    margin: 0 auto;
}

.yield-icon-field {
    position: relative;
    height: 128px;
    overflow: hidden;
    border-top: 1px solid var(--border-primary);
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.yield-icon-axis {
    position: absolute;
    right: 4%;
    bottom: 17px;
    left: 4%;
    z-index: 0;
    border-top: 1px solid var(--border-subtle);
}

.yield-icon-axis::before,
.yield-icon-axis::after {
    content: "";
    position: absolute;
    top: -1px;
    width: 52px;
    border-top: 1px solid var(--accent);
}

.yield-icon-axis::before {
    left: 18%;
}

.yield-icon-axis::after {
    right: 12%;
}

.yield-orbit-icon {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 1;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--border-primary);
    background: var(--bg-elevated);
    color: var(--text-primary);
    opacity: 0.82;
    transform: translate3d(-50%, -50%, 0);
}

.yield-orbit-icon:nth-child(3n + 1) {
    width: 32px;
    height: 32px;
}

.yield-orbit-icon:nth-child(4n) {
    width: 40px;
    height: 40px;
}

.yield-orbit-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.yield-icon-field.is-animating .yield-orbit-icon {
    animation: yield-icon-arrive 1400ms var(--ease-out) var(--delay) both;
}

@keyframes yield-icon-arrive {
    0% {
        opacity: 0;
        transform: translate3d(calc(-50% + var(--from-x)), calc(-50% + var(--from-y)), 0) rotate(var(--turn)) scale(0.72);
    }
    45% {
        opacity: 0.94;
    }
    100% {
        opacity: 0.82;
        transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1);
    }
}

.yield-page-header {
    min-height: 92px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 36px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-primary);
}

.yield-kicker {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.yield-page-header h1 {
    min-width: 0;
    margin-top: 8px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: clamp(2rem, 4.5vw, 3.75rem);
    font-weight: 760;
    line-height: 0.95;
    letter-spacing: -0.055em;
    overflow-wrap: anywhere;
}

.yield-page-header p {
    max-width: 410px;
    color: var(--text-tertiary);
    font-size: 0.76rem;
    line-height: 1.55;
}

.yield-exchange-row {
    display: grid;
    grid-template-columns: 120px minmax(220px, 340px) 1fr;
    align-items: center;
    gap: 18px;
    min-height: 76px;
    border-bottom: 1px solid var(--border-subtle);
}

.yield-exchange-row > label,
.yield-field > label {
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 680;
}

.yield-exchange-row select,
.yield-input-wrap {
    height: 44px;
    border: 1px solid var(--border-primary);
    outline: 2px solid transparent;
    outline-offset: 1px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.yield-exchange-row select {
    width: 100%;
    padding: 0 36px 0 14px;
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
}

.yield-exchange-row select:focus-visible,
.yield-input-wrap:focus-within {
    outline-color: var(--text-secondary);
}

.yield-exchange-row select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.yield-exchange-context {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    line-height: 1.5;
}

.yield-workbench {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 1px;
    margin-top: 24px;
    border: 1px solid var(--border-primary);
    background: var(--border-primary);
}

.yield-input-panel,
.yield-output-panel {
    min-width: 0;
    padding: 24px;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.yield-panel-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.yield-panel-heading > span {
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 740;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.yield-panel-heading small {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.6rem;
}

.yield-field {
    display: grid;
    gap: 8px;
    margin-top: 18px;
}

.yield-field > label span {
    margin-left: 5px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.52rem;
    font-weight: 500;
}

.yield-field-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.yield-form-section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-primary);
}

.yield-form-section-heading > span {
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 740;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.yield-form-section-heading small {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.6rem;
}

.yield-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    transition:
        background-color 150ms var(--ease-out),
        border-color 150ms var(--ease-out);
}

.yield-input-wrap > span {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}

.yield-input-wrap input {
    min-width: 0;
    width: 100%;
    height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 620;
}

.yield-input-wrap input::placeholder {
    color: var(--text-tertiary);
}

.yield-input-wrap:has(input[aria-invalid="true"]) {
    border-color: var(--negative);
}

.yield-input-wrap:has(input[data-state="success"]:not(:placeholder-shown)) {
    border-color: var(--positive-dim);
}

.yield-input-wrap:has(input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.yield-field-help {
    min-height: 1lh;
    color: var(--text-tertiary);
    font-size: 0.61rem;
    line-height: 1.4;
}

@media (hover: hover) {
    .yield-exchange-row select:hover,
    .yield-input-wrap:hover {
        background: var(--bg-hover);
    }
}

.yield-primary-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--border-primary);
}

.yield-output-panel {
    font-variant-numeric: tabular-nums;
}

.yield-result-main {
    min-width: 0;
    min-height: 142px;
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 20px;
}

.yield-result-main + .yield-result-main {
    border-left: 1px solid var(--border-primary);
}

.yield-result-main span,
.yield-result-ledger span {
    color: var(--text-tertiary);
    font-size: 0.64rem;
    font-weight: 670;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.yield-result-main strong {
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: clamp(1.7rem, 3vw, 2.65rem);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yield-result-main:last-child strong {
    color: var(--positive);
}

.yield-result-ledger {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-bottom: 1px solid var(--border-primary);
}

.yield-result-ledger > div {
    min-width: 0;
    min-height: 88px;
    display: grid;
    align-content: center;
    gap: 8px;
    padding: 16px 18px;
}

.yield-result-ledger > div + div {
    border-left: 1px solid var(--border-subtle);
}

.yield-result-ledger strong {
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yield-economics-summary {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    border-bottom: 1px solid var(--border-primary);
}

.yield-net-result {
    min-width: 0;
    min-height: 206px;
    display: grid;
    align-content: center;
    gap: 10px;
    padding: 22px 20px;
    border-right: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.yield-net-result > span {
    color: var(--text-tertiary);
    font-size: 0.62rem;
    font-weight: 720;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.yield-net-result > strong {
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: clamp(1.8rem, 3.4vw, 3rem);
    font-weight: 680;
    line-height: 1;
    letter-spacing: -0.045em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yield-net-result > small {
    color: var(--text-tertiary);
    font-size: 0.58rem;
    line-height: 1.45;
}

.yield-net-result[data-tone="positive"] > span,
.yield-net-result[data-tone="positive"] > strong {
    color: var(--positive);
}

.yield-net-result[data-tone="negative"] > span,
.yield-net-result[data-tone="negative"] > strong {
    color: var(--negative);
}

.yield-economics-ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.yield-economics-ledger > div {
    min-width: 0;
    min-height: 68px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
}

.yield-economics-ledger > div:nth-child(odd) {
    border-right: 1px solid var(--border-subtle);
}

.yield-economics-ledger > div:nth-last-child(-n + 2) {
    border-bottom: 0;
}

.yield-economics-ledger span {
    color: var(--text-tertiary);
    font-size: 0.57rem;
    font-weight: 670;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.yield-economics-ledger strong {
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yield-economics-ledger strong[data-tone="positive"] {
    color: var(--positive);
}

.yield-economics-ledger strong[data-tone="negative"] {
    color: var(--negative);
}

.yield-scenarios {
    margin-top: 22px;
}

.yield-scenarios table {
    width: 100%;
    border-collapse: collapse;
}

.yield-scenarios th,
.yield-scenarios td {
    height: 46px;
    padding: 0 10px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    text-align: right;
    white-space: nowrap;
}

.yield-scenarios th {
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.55rem;
    font-weight: 680;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.yield-scenarios th:first-child,
.yield-scenarios td:first-child {
    padding-left: 0;
    text-align: left;
}

.yield-scenarios th:last-child,
.yield-scenarios td:last-child {
    padding-right: 0;
}

.yield-scenarios tbody tr:nth-child(2) td {
    color: var(--text-primary);
    font-weight: 700;
}

.yield-scenarios td[data-tone="positive"] {
    color: var(--positive);
}

.yield-scenarios td[data-tone="negative"] {
    color: var(--negative);
}

.yield-disclaimer {
    margin-top: 18px;
    color: var(--text-tertiary);
    font-size: 0.61rem;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .yield-workbench {
        grid-template-columns: 1fr;
    }

    .yield-page-header {
        align-items: start;
        flex-direction: column;
        gap: 16px;
    }

    .yield-economics-summary {
        grid-template-columns: 1fr;
    }

    .yield-net-result {
        min-height: 154px;
        border-right: 0;
        border-bottom: 1px solid var(--border-primary);
    }

    .yield-exchange-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px 0;
    }
}

@media (max-width: 640px) {
    #history-table-modal > .modal-header,
    #single-ex-history-table-modal > .modal-header {
        min-height: 116px;
        padding: 14px 48px 14px 14px !important;
    }

    .history-modal-heading {
        justify-items: start;
    }

    .history-modal-heading .modal-title {
        width: 100%;
        font-size: 0.78rem !important;
        text-align: left;
    }

    .history-timeframe-selector {
        width: 100%;
    }

    .campaign-notice {
        top: auto;
        right: 12px;
        /* Same reasoning as the desktop rule: clear the fixed footer entirely. */
        bottom: calc(var(--footer-height) + max(12px, env(safe-area-inset-bottom)) + 28px);
        width: calc(100vw - 24px);
    }

    .yield-calculator-page {
        padding: 22px 12px 64px;
    }

    .yield-icon-field {
        height: 96px;
    }

    .yield-orbit-icon:nth-child(n + 7) {
        display: none;
    }

    .yield-orbit-icon {
        top: clamp(22px, var(--y), 68px);
    }

    .yield-orbit-icon:nth-child(1) { left: 5% !important; }
    .yield-orbit-icon:nth-child(2) { left: 23% !important; }
    .yield-orbit-icon:nth-child(3) { left: 41% !important; }
    .yield-orbit-icon:nth-child(4) { left: 59% !important; }
    .yield-orbit-icon:nth-child(5) { left: 77% !important; }
    .yield-orbit-icon:nth-child(6) { left: 95% !important; }

    .yield-input-panel,
    .yield-output-panel {
        padding: 18px 14px;
    }

    .yield-field-pair,
    .yield-primary-results,
    .yield-result-ledger,
    .yield-economics-ledger {
        grid-template-columns: 1fr;
    }

    .yield-result-main + .yield-result-main,
    .yield-result-ledger > div + div {
        border-top: 1px solid var(--border-subtle);
        border-left: 0;
    }

    .yield-economics-ledger > div,
    .yield-economics-ledger > div:nth-child(odd),
    .yield-economics-ledger > div:nth-last-child(-n + 2) {
        border-right: 0;
        border-bottom: 1px solid var(--border-subtle);
    }

    .yield-economics-ledger > div:last-child {
        border-bottom: 0;
    }

    .yield-form-section-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .yield-panel-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .yield-scenarios {
        overflow: visible;
    }

    .yield-scenarios thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .yield-scenarios tbody {
        display: grid;
        gap: 8px;
        margin-top: 10px;
    }

    .yield-scenarios tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
        padding: 10px 12px;
        border: 1px solid var(--border-subtle);
    }

    .yield-scenarios td,
    .yield-scenarios td:first-child,
    .yield-scenarios td:last-child {
        height: auto;
        min-width: 0;
        display: grid;
        gap: 4px;
        padding: 8px 0;
        border-bottom: 1px solid var(--border-subtle);
        text-align: left;
        white-space: normal;
    }

    .yield-scenarios td:nth-child(3),
    .yield-scenarios td:nth-child(5) {
        justify-items: end;
        text-align: right;
    }

    .yield-scenarios td::before {
        content: attr(data-label);
        color: var(--text-tertiary);
        font-family: var(--font-sans);
        font-size: 0.5rem;
        font-weight: 680;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .yield-scenarios td:first-child {
        grid-column: 1 / -1;
        color: var(--text-primary);
        font-weight: 720;
    }

    .yield-scenarios td:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .campaign-notice {
        animation: campaign-notice-fade-in 140ms ease-out both;
    }

    .history-timeframe-btn,
    .campaign-notice-cta,
    .yield-input-wrap {
        transition: none;
    }

    .yield-icon-field.is-animating .yield-orbit-icon {
        animation: none;
    }
}
/* Hallmark component: unified close control
 * genre: restrained technical workbench; anchor: warm red; macrostructure unchanged
 * states: default / hover / focus / active / disabled / loading / error / success
 * contrast: pass; touch target: 44px; reduced motion: pass
 */
.ui-close-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    display: grid !important;
    place-items: center !important;
    flex: 0 0 44px !important;
    box-sizing: border-box;
    margin: 0;
    padding: 0 !important;
    overflow: visible;
    border: 1px solid var(--border-primary) !important;
    border-radius: 0 !important;
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: var(--bg-tertiary) !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    opacity: 1 !important;
    cursor: pointer;
    transition:
        background-color 150ms var(--ease-out),
        border-color 150ms var(--ease-out),
        color 150ms var(--ease-out);
}

.ui-close-button > svg {
    width: 16px !important;
    height: 16px !important;
    display: block;
    overflow: visible;
    stroke: currentColor;
    stroke-width: 1.65 !important;
    stroke-linecap: square;
    stroke-linejoin: miter;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

@media (hover: hover) {
    .ui-close-button:hover {
        border-color: var(--negative-dim) !important;
        background: var(--bg-active) !important;
        color: var(--negative) !important;
    }
}

.ui-close-button:focus-visible {
    border-color: var(--text-secondary) !important;
    outline: 2px solid var(--text-primary) !important;
    outline-offset: 2px;
}

.ui-close-button:active {
    border-color: var(--negative-dim) !important;
    background: var(--bg-hover) !important;
    color: var(--negative) !important;
}

.ui-close-button:disabled,
.ui-close-button[aria-disabled="true"] {
    opacity: 0.42 !important;
    cursor: not-allowed;
}

.ui-close-button[data-state="loading"] {
    color: var(--text-muted) !important;
}

.ui-close-button[data-state="loading"] > svg {
    opacity: 0.55;
}

.ui-close-button[data-state="error"] {
    border-color: var(--negative-dim) !important;
    color: var(--negative) !important;
}

.ui-close-button[data-state="success"] {
    border-color: var(--positive) !important;
    color: var(--positive) !important;
}

:where(#history-table-close, #single-ex-history-table-close) {
    top: 11px !important;
    right: 16px !important;
}

#single-ex-history-table-close {
    top: 9px !important;
}

@media (prefers-reduced-motion: reduce) {
    .ui-close-button {
        transition: none;
    }
}

/* Specificity guard for the single-exchange history close control. */
#single-ex-history-table-close.ui-close-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 1px solid var(--border-primary) !important;
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
}

@media (hover: hover) {
    #single-ex-history-table-close.ui-close-button:hover {
        border-color: var(--negative-dim) !important;
        background: var(--bg-active) !important;
        color: var(--negative) !important;
    }
}

#single-ex-history-table-close.ui-close-button:focus-visible {
    border-color: var(--text-secondary) !important;
    outline: 2px solid var(--text-primary) !important;
}
/* Hallmark component: arbitrage position legs
 * genre: modern-minimal; theme: existing FomoHub technical ledger
 * interaction: informational; linked legs retain restrained hover and active states
 */
#detail-modal .modal-arb-leg,
#detail-modal .modal-arb-leg.leg-long,
#detail-modal .modal-arb-leg.leg-short {
    min-height: 124px;
    grid-template-rows: 36px minmax(48px, 1fr) 40px;
    gap: 0;
    padding: 0;
    background: var(--bg-secondary);
}

#detail-modal .modal-arb-leg-head {
    min-width: 0;
    min-height: 36px;
    gap: 12px;
    padding: 0 48px 0 16px;
    border-bottom: 1px solid var(--border-subtle);
}

#detail-modal .modal-arb-leg-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

#detail-modal .modal-arb-leg-label.long {
    color: var(--positive);
}

#detail-modal .modal-arb-leg-label.short {
    color: var(--negative);
}


#detail-modal .modal-arb-leg-interval {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding: 0;
    border-left: 0;
    white-space: nowrap;
}

#detail-modal .modal-arb-leg-interval-label,
#detail-modal .modal-arb-leg-venue-label {
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

#detail-modal .modal-arb-leg-interval strong {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.02em;
}

#detail-modal .modal-arb-leg-venue {
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
}

#detail-modal .modal-arb-leg-exchange {
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: var(--text-primary);
    font-size: 1.14rem;
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#detail-modal .modal-arb-leg-metric {
    min-height: 40px;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-subtle);
}

#detail-modal .modal-arb-leg-metric-label {
    color: var(--text-tertiary);
    font-size: 0.52rem;
}

#detail-modal .modal-arb-leg-rate {
    color: var(--text-primary);
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

#detail-modal .leg-long .modal-arb-leg-rate {
    color: var(--positive);
}

#detail-modal .leg-short .modal-arb-leg-rate {
    color: var(--negative);
}

@media (hover: hover) {
    #detail-modal .modal-arb-leg[style*="cursor: pointer"]:hover,
    #detail-modal .modal-arb-leg[style*="cursor: pointer"]:hover .modal-arb-leg-metric {
        background: var(--bg-hover);
    }
}

#detail-modal .modal-arb-leg[style*="cursor: pointer"]:active,
#detail-modal .modal-arb-leg[style*="cursor: pointer"]:active .modal-arb-leg-metric {
    background: var(--bg-active);
}

@media (max-width: 520px) {
    #detail-modal .modal-arb-leg-head {
        padding-left: 16px;
    }

    #detail-modal .modal-arb-leg-label {
        font-size: 0.54rem;
    }

    #detail-modal .modal-arb-leg-interval-label {
        display: none;
    }

    #detail-modal .modal-arb-leg-venue,
    #detail-modal .modal-arb-leg-metric {
        padding-right: 16px;
        padding-left: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #detail-modal .modal-arb-leg,
    #detail-modal .modal-arb-leg::after,
    #detail-modal .modal-arb-leg-metric {
        transition-duration: 0.01ms !important;
    }
}
/* Hallmark component: exchange rate tooltip
 * genre: modern-minimal; theme: existing FomoHub technical ledger
 * interaction: informational hover surface; no independent interactive states
 */
.ex-tooltip {
    width: 288px;
    min-width: 288px;
    max-width: 288px;
    padding: 0;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    box-shadow: var(--shadow-lg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.ex-tooltip-header {
    min-height: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--border-primary);
}

.ex-tooltip-header > div {
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px;
}

.ex-tooltip-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.035em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.ex-tooltip-side {
    min-width: 72px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    border-left: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.02em;
}

.ex-tooltip-side::before {
    content: "ASSET";
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.08em;
}

.ex-tooltip-section {
    margin: 0;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-primary);
}

.ex-tooltip-section:last-child {
    margin: 0;
    padding: 12px 16px 0;
    border-bottom: 0;
}

.ex-tooltip-header + .ex-tooltip-section::before,
.ex-tooltip-subtitle {
    display: block;
    margin: 0 0 8px;
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ex-tooltip-header + .ex-tooltip-section::before {
    content: "CURRENT RATE";
}

.ex-tooltip-row {
    min-height: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1;
}

.ex-tooltip-section:last-child .ex-tooltip-row:not(.highlight) {
    border-bottom: 1px solid var(--border-subtle);
}

.ex-tooltip-label {
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 550;
}

.ex-tooltip-value {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    text-align: right;
}

.ex-tooltip-row.highlight {
    min-height: 44px;
    margin: 8px -16px 0;
    padding: 0 16px;
    background: var(--bg-tertiary);
    border: 0;
    border-top: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
}

.ex-tooltip-row.highlight .ex-tooltip-label {
    color: var(--text-secondary);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ex-tooltip-row.highlight .ex-tooltip-value {
    color: var(--text-primary);
    font-size: 0.96rem;
    font-weight: 700;
}

@media (max-width: 360px) {
    .ex-tooltip {
        width: min(288px, calc(100vw - 32px));
        min-width: 0;
        max-width: calc(100vw - 32px);
    }
}
/* Language trigger alignment correction. */
.language-trigger {
    position: relative;
    justify-content: center;
    padding: 0 32px;
    text-align: center;
    white-space: nowrap;
}

.language-trigger svg {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
}

.language-trigger[aria-expanded="true"] svg {
    transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 520px) {
    .language-trigger svg {
        right: 12px;
    }
}
/* Stable-card realized average: compact chart annotation v2. */
#anomaly-ticker .ticker-card .ticker-realized-avg {
    top: 52%;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 1px;
    align-items: baseline;
    min-width: 104px;
    height: auto;
    padding: 4px 8px;
    border: 0;
    background: var(--bg-primary);
    color: var(--text-secondary);
    box-shadow: none;
}

#anomaly-ticker .ticker-card .ticker-realized-label {
    grid-column: 1 / -1;
    grid-row: 1;
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 680;
    line-height: 1;
    letter-spacing: 0.09em;
}

#anomaly-ticker .ticker-card .ticker-realized-period {
    grid-column: 1;
    grid-row: 2;
    padding: 0;
    border: 0;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 760;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

#anomaly-ticker .ticker-card .ticker-realized-value {
    grid-column: 2;
    grid-row: 2;
    padding: 0;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 680;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
    #anomaly-ticker .ticker-card:hover .ticker-realized-avg {
        border: 0;
        background: var(--bg-primary);
        color: var(--text-primary);
    }
}
/* Stable-card realized average: unboxed chart caption v3. */
#anomaly-ticker .ticker-card .ticker-realized-avg {
    top: 52%;
    display: inline-grid;
    grid-template-columns: auto auto;
    grid-template-areas:
        "value period"
        "label label";
    column-gap: 6px;
    row-gap: 2px;
    align-items: end;
    min-width: 0;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-secondary);
    box-shadow: none;
    text-align: left;
    backdrop-filter: none;
    transition: none;
}

#anomaly-ticker .ticker-card .ticker-realized-label {
    grid-area: label;
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.5rem;
    font-weight: 680;
    line-height: 1;
    letter-spacing: 0.1em;
}

#anomaly-ticker .ticker-card .ticker-realized-period {
    grid-area: period;
    align-self: baseline;
    padding: 0 0 1px;
    border: 0;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.52rem;
    font-weight: 760;
    line-height: 1;
    letter-spacing: 0.02em;
}

#anomaly-ticker .ticker-card .ticker-realized-value {
    grid-area: value;
    padding: 0;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
    #anomaly-ticker .ticker-card:hover .ticker-realized-avg {
        border: 0;
        background: transparent;
        color: var(--text-secondary);
    }
}
/* Exchange reward cards: distinct restrained panels. */
#active-campaigns-grid {
    gap: 0 !important;
    padding: 0 0 10px !important;
    background: transparent;
    align-items: stretch;
}

#active-campaigns-grid .campaign-card {
    position: relative;
    flex: 0 0 272px !important;
    min-height: 152px;
    display: grid !important;
    grid-template-rows: 40px 1fr;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: #0c0c0c !important;
    /* Hairline lives on the card, not as a container background: a scroll rail
       that under-fills its width would otherwise leak a lit band on the right. */
    border: 0 !important;
    border-left: 1px solid var(--border-subtle) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: default !important;
    transition: background-color 120ms ease;
}

#active-campaigns-grid .campaign-card:first-child {
    border-left: 0 !important;
}

#active-campaigns-grid .campaign-card:hover {
    background: #0f0f0f !important;
}

/* The exchange name reads as the card's index line, not a filled header bar. */
#active-campaigns-grid .campaign-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 18px;
    background: transparent;
    border: 0;
}

#active-campaigns-grid .campaign-card::before,
#active-campaigns-grid .campaign-card-head::after {
    content: none;
    display: none;
}

#active-campaigns-grid .campaign-exchange {
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: var(--markets-title);
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -0.025em;
}

#active-campaigns-grid .campaign-card-body {
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 0 18px 16px;
}

/* Reward is the one figure worth reading at a glance — give it the metric scale. */
#active-campaigns-grid .campaign-reward {
    display: grid;
    align-content: center;
    gap: 9px;
    padding: 4px 0 14px;
    border: 0;
}

#active-campaigns-grid .campaign-reward > strong {
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--markets-reward);
    font-weight: 620;
    line-height: 1.1;
    letter-spacing: -0.04em;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#active-campaigns-grid .campaign-action {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-height: 0;
    padding: 11px 0 0;
    border-top: 1px solid var(--border-subtle);
}

#active-campaigns-grid .campaign-action strong {
    min-width: 0;
    overflow: hidden;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--markets-body);
    font-weight: 600;
    line-height: 1;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#active-campaigns-grid .campaign-field-label {
    flex: 0 0 auto;
    color: var(--text-tertiary) !important;
    font-family: var(--font-sans);
    font-size: var(--markets-caption);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

/* Cadence marker: a quiet type token, not a boxed badge competing with the reward.
   It is deliberately the one amber note in the card — the field labels around it are
   grey, so sharing their colour would read as another label instead of a status flag.
   Amber is dimmed from --warning: full #f4b740 would outshout the reward figure.
   Colour alone carries the distinction; no glyph, dot or rule beside the word. */
#active-campaigns-grid .campaign-note {
    display: inline-flex;
    align-items: center;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0 !important;
    color: #b8934f;
    font-family: var(--font-mono);
    font-size: var(--markets-caption);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

#active-campaigns-grid .campaign-note::before,
#active-campaigns-grid .campaign-note::after {
    content: none;
}

@media (max-width: 640px) {
    #active-campaigns-grid .campaign-card {
        flex-basis: 244px !important;
        min-height: 148px;
    }

    #active-campaigns-grid .campaign-card-head {
        padding-inline: 15px;
    }

    #active-campaigns-grid .campaign-card-body {
        padding-inline: 15px;
    }
}

/* Hallmark В· component: exchange search input В· genre: modern-minimal В· theme: FomoHub dark
 * states: default В· hover В· focus В· active В· disabled В· loading В· error В· success
 * contrast: pass В· pre-emit critique: P5 H5 E5 S5 R5 V4
 */
#exchanges-dashboard-page .exchange-search-field {
    position: relative;
    width: 280px;
    max-width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 44px 0 16px;
    gap: 12px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 0;
    outline: 2px solid transparent;
    outline-offset: 1px;
    color: var(--text-secondary);
    transition:
        background-color 150ms var(--ease-out),
        border-color 150ms var(--ease-out);
}

#exchanges-dashboard-page .exchange-search-field::after {
    content: "";
    position: absolute;
    inset: auto -1px -1px -1px;
    height: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 220ms var(--ease-out);
    pointer-events: none;
}

#exchanges-dashboard-page .exchange-search-field::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset-inline-end: 16px;
    top: 50%;
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transform: translateY(-50%);
    pointer-events: none;
}

#exchanges-dashboard-page .exchange-search-field .search-icon {
    position: relative;
    z-index: 2;
    width: 18px;
    height: 18px;
    color: var(--text-tertiary);
    transition: color 150ms var(--ease-out);
}

#exchanges-dashboard-page .exchange-search-field #ex-table-search-input {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    caret-color: var(--accent);
    font-family: var(--font-sans);
    font-size: var(--markets-body);
    font-weight: 560;
    line-height: 1;
    outline: 0;
}

#exchanges-dashboard-page .exchange-search-field #ex-table-search-input::placeholder {
    color: transparent;
}

#exchanges-dashboard-page .exchange-search-demo {
    position: absolute;
    z-index: 1;
    inset-inline: 44px 40px;
    top: 50%;
    overflow: hidden;
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: var(--markets-body);
    font-weight: 520;
    line-height: 1;
    text-overflow: clip;
    white-space: nowrap;
    opacity: 1;
    transform: translateY(-50%);
    transition: opacity 100ms var(--ease-out);
    pointer-events: none;
}

#exchanges-dashboard-page .exchange-search-field.is-demo-typing::after,
#exchanges-dashboard-page .exchange-search-field:focus-within::after {
    transform: scaleX(1);
}

#exchanges-dashboard-page .exchange-search-field.is-demo-typing .search-icon,
#exchanges-dashboard-page .exchange-search-field:focus-within .search-icon {
    color: var(--accent);
}

#exchanges-dashboard-page .exchange-search-field:focus-within {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

#exchanges-dashboard-page .exchange-search-field:has(#ex-table-search-input:focus-visible) {
    outline-color: var(--accent);
}

#exchanges-dashboard-page .exchange-search-field:focus-within .exchange-search-demo,
#exchanges-dashboard-page .exchange-search-field.has-value .exchange-search-demo {
    opacity: 0;
}

#exchanges-dashboard-page .exchange-search-field:active {
    background: var(--bg-active);
}

#exchanges-dashboard-page .exchange-search-field:has(#ex-table-search-input:disabled) {
    cursor: not-allowed;
    opacity: 0.55;
}

#exchanges-dashboard-page .exchange-search-field #ex-table-search-input:disabled {
    cursor: not-allowed;
}

#exchanges-dashboard-page .exchange-search-field[data-state="loading"]::before {
    border: 1px solid var(--border-primary);
    border-top-color: var(--accent);
    border-radius: 50%;
    opacity: 1;
    animation: exchange-search-spin 800ms linear infinite;
}

#exchanges-dashboard-page .exchange-search-field:has(#ex-table-search-input[aria-invalid="true"]) {
    border-color: var(--negative);
}

#exchanges-dashboard-page .exchange-search-field:has(#ex-table-search-input[aria-invalid="true"])::before {
    content: "!";
    color: var(--negative);
    opacity: 1;
}

#exchanges-dashboard-page .exchange-search-field[data-state="success"] {
    border-color: var(--positive);
}

#exchanges-dashboard-page .exchange-search-field[data-state="success"]::before {
    content: "вњ“";
    color: var(--positive);
    opacity: 1;
}

@keyframes exchange-search-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

@media (hover: hover) and (pointer: fine) {
    #exchanges-dashboard-page .exchange-search-field:hover {
        background: var(--bg-tertiary);
        border-color: var(--text-muted);
    }
}

@media (max-width: 40rem) {
    #exchanges-dashboard-page .table-toolbar {
        flex-wrap: wrap;
        gap: 12px;
        align-items: stretch !important;
    }

    #exchanges-dashboard-page .toolbar-left,
    #exchanges-dashboard-page .toolbar-right {
        width: 100%;
    }

    #exchanges-dashboard-page .toolbar-right,
    #exchanges-dashboard-page .exchange-search-field {
        justify-content: stretch;
    }

    #exchanges-dashboard-page .exchange-search-field {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #exchanges-dashboard-page .exchange-search-field,
    #exchanges-dashboard-page .exchange-search-field::after,
    #exchanges-dashboard-page .exchange-search-field .search-icon,
    #exchanges-dashboard-page .exchange-search-demo {
        transition-duration: 0ms !important;
    }

    #exchanges-dashboard-page .exchange-search-field[data-state="loading"]::before {
        animation-duration: 1600ms;
    }
}
/* Hallmark · component: funding-spread tooltip · genre: modern-minimal · theme: existing workbench
 * states: hidden · visible · long · short · compact
 * contrast: pass · pre-emit critique: P5 H5 E5 S5 R5 V5
 */
:root {
    --arb-tooltip-width: 34rem;
    --arb-tooltip-rule: var(--border-primary);
    --arb-tooltip-rule-soft: var(--border-subtle);
    --arb-tooltip-surface: var(--bg-secondary);
    --arb-tooltip-surface-raised: var(--bg-tertiary);
    --arb-tooltip-duration: 150ms;
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --z-tooltip: 2000;
}

.arb-tooltip {
    z-index: var(--z-tooltip);
    width: min(var(--arb-tooltip-width), calc(100vw - var(--space-lg)));
    display: block;
    overflow: hidden;
    color: var(--text-primary);
    background: var(--arb-tooltip-surface);
    border: 1px solid var(--arb-tooltip-rule);
    box-shadow: none;
    opacity: 0;
    transform: translateY(var(--space-2xs));
    transition:
        opacity var(--arb-tooltip-duration) var(--ease-out),
        transform var(--arb-tooltip-duration) var(--ease-out);
}

.arb-tooltip::before {
    display: none;
}

.arb-tooltip:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}

.arb-tooltip-header {
    min-height: 56px;
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    background: var(--arb-tooltip-surface-raised);
    border-bottom: 1px solid var(--arb-tooltip-rule);
}

.arb-tooltip-row {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-lg);
}

.arb-tooltip-label {
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.arb-tooltip-value {
    min-width: 8.25rem;
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    justify-content: end;
    gap: var(--space-xs);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 1.18rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.arb-tooltip-value::before {
    content: 'APR';
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1;
}

.arb-tooltip-value.positive {
    color: var(--text-primary);
}

.arb-tooltip-legs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0;
}

.arb-tooltip-leg {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-md);
    row-gap: 0;
    padding: var(--space-md);
    background: var(--arb-tooltip-surface);
    border: 0;
}

.arb-tooltip-leg + .arb-tooltip-leg {
    border-inline-start: 1px solid var(--arb-tooltip-rule);
}

.arb-tooltip-leg.leg-long,
.arb-tooltip-leg.leg-short {
    background: var(--arb-tooltip-surface);
    border-color: var(--arb-tooltip-rule);
    border-inline-start-width: 1px;
}

.arb-tooltip .leg-title {
    grid-column: 1;
    margin-bottom: var(--space-2xs);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    text-transform: uppercase;
}

.arb-tooltip .leg-title.long {
    color: var(--positive);
}

.arb-tooltip .leg-title.short {
    color: var(--negative);
}

.arb-tooltip .leg-exchange {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0 0 var(--space-sm);
    padding: 0 0 var(--space-sm);
    color: var(--text-primary);
    border-bottom: 1px solid var(--arb-tooltip-rule-soft);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.arb-tooltip .leg-detail {
    grid-column: 1 / -1;
    min-height: 28px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-md);
}

.arb-tooltip .leg-exchange + .leg-detail {
    min-height: 36px;
    margin-bottom: var(--space-2xs);
    border-bottom: 1px solid var(--arb-tooltip-rule-soft);
}

.arb-tooltip-leg .detail-label {
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
}

.arb-tooltip-leg .detail-value {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 550;
    letter-spacing: -0.025em;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.arb-tooltip .leg-exchange + .leg-detail .detail-label {
    color: var(--text-secondary);
    font-weight: 600;
}

.arb-tooltip .leg-exchange + .leg-detail .detail-value {
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 600;
}

@media (max-width: 34rem) {
    .arb-tooltip {
        width: min(20rem, calc(100vw - var(--space-md)));
    }

    .arb-tooltip-header {
        min-height: 52px;
        padding-inline: var(--space-sm);
    }

    .arb-tooltip-legs {
        grid-template-columns: minmax(0, 1fr);
    }

    .arb-tooltip-leg {
        padding: var(--space-sm);
    }

    .arb-tooltip-leg + .arb-tooltip-leg {
        border-inline-start: 0;
        border-top: 1px solid var(--arb-tooltip-rule);
    }
}

@media (prefers-reduced-motion: reduce) {
    .arb-tooltip {
        transform: none;
        transition: opacity var(--arb-tooltip-duration) linear;
    }
}
/* Hallmark component: arbitrage position-leg alignment
 * genre: modern-minimal; tone: austere technical; palette: existing FomoHub tokens
 * Hallmark pre-emit critique: P5 H5 E5 S5 R5 V5; contrast: pass; responsive: pass
 */
#detail-modal .modal-arb-leg-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-sm);
    padding-inline: var(--space-md);
}

#detail-modal .modal-arb-leg-label {
    gap: 0;
    min-width: 0;
}

#detail-modal .modal-arb-leg[style*="cursor: pointer"]::after {
    content: none;
    display: none;
}

#detail-modal .modal-arb-leg-interval {
    justify-self: end;
    margin-left: 0;
}

#detail-modal .modal-arb-leg-venue,
#detail-modal .modal-arb-leg-metric {
    padding-inline: var(--space-md);
}

#detail-modal .modal-arb-leg-venue-label,
#detail-modal .modal-arb-leg-exchange,
#detail-modal .modal-arb-leg-metric-label,
#detail-modal .modal-arb-leg-rate {
    margin-inline: 0;
    text-align: left;
}

#detail-modal .modal-arb-apr-label {
    margin-block-end: var(--space-xs);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
}

@media (max-width: 520px) {
    #detail-modal .modal-arb-leg-head,
    #detail-modal .modal-arb-leg-venue,
    #detail-modal .modal-arb-leg-metric {
        padding-inline: var(--space-md);
    }
}

/* Hallmark component: realized-spread modal identity header */
#history-table-modal > .modal-header {
    min-height: 94px;
    justify-content: flex-start;
    padding: var(--space-md) calc(var(--space-lg) * 3) var(--space-md) var(--space-lg) !important;
}

#history-table-modal .history-modal-heading--spread {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    justify-items: stretch;
    gap: var(--space-lg);
}

#history-table-modal .history-detail-identity,
#history-table-modal .history-detail-period {
    min-width: 0;
    display: grid;
    align-content: end;
    gap: var(--space-xs);
}

#history-table-modal .history-detail-period {
    justify-items: start;
}

#history-table-modal .history-detail-label {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#history-table-modal #history-table-title {
    width: auto;
    max-width: 100%;
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: clamp(1.24rem, 2vw, 1.55rem) !important;
    font-weight: 720 !important;
    line-height: 1;
    letter-spacing: -0.035em !important;
    text-align: left;
    text-overflow: clip;
    white-space: nowrap;
}

#history-table-modal #history-table-token {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#history-table-modal .history-detail-market {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

#history-table-modal .history-timeframe-selector {
    min-height: 44px;
    border: 0;
    border-bottom: 1px solid var(--border-primary);
    background: transparent;
}

#history-table-modal .history-timeframe-btn {
    min-width: 48px;
    min-height: 44px;
    padding: 0 var(--space-sm);
    border: 0;
    background: transparent;
    color: var(--text-tertiary);
}

#history-table-modal .history-timeframe-btn.active,
#history-table-modal .history-timeframe-btn[aria-pressed="true"] {
    background: transparent;
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 var(--accent);
}

@media (hover: hover) {
    #history-table-modal .history-timeframe-btn:hover:not(:disabled):not(.active) {
        background: transparent;
        color: var(--text-secondary);
    }
}

@media (max-width: 640px) {
    #history-table-modal > .modal-header {
        min-height: 142px;
        padding: var(--space-md) calc(var(--space-lg) * 2 + var(--space-xs)) var(--space-md) var(--space-md) !important;
    }

    #history-table-modal .history-modal-heading--spread {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: var(--space-sm);
    }

    #history-table-modal .history-detail-period,
    #history-table-modal .history-timeframe-selector {
        width: 100%;
    }

    #history-table-modal #history-table-title {
        font-size: 1.18rem !important;
        text-align: left;
    }
}
/* Realized-spread value column: centered numeric rhythm */
#history-table-modal thead th:nth-child(4),
#history-table-body > tr > td:nth-child(4) {
    text-align: center !important;
}
/* Hallmark | pre-emit critique: P5 H5 E5 S5 R5 V4
 * components: navigation, language, realized metric, exchange selector
 * genre: product workbench | theme: existing FomoHub
 * states: default | hover | focus | active | disabled | loading | error | success
 * contrast: pass
 */

/* Primary navigation: quiet text rail with a precise active register. */
.header-nav {
    gap: 32px !important;
    min-height: var(--header-height);
    align-items: stretch !important;
    background: transparent !important;
    border: 0 !important;
}

.header-nav .nav-link {
    position: relative;
    min-height: 44px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-tertiary) !important;
    border: 0 !important;
    background: transparent !important;
    transition: color var(--transition-fast), opacity var(--transition-fast) !important;
}

.header-nav .nav-link + .nav-link::before {
    display: none !important;
}

.header-nav .nav-icon {
    font-family: var(--font-sans) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: -0.015em !important;
    color: inherit !important;
}

.header-nav .nav-link::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background: var(--border-primary) !important;
    transform: scaleX(0) !important;
    transform-origin: center !important;
    transition: transform var(--transition-fast), background-color var(--transition-fast) !important;
}

@media (hover: hover) {
    .header-nav .nav-link:hover:not(.disabled) {
        color: var(--text-secondary) !important;
    }

    .header-nav .nav-link:hover:not(.disabled)::after {
        transform: scaleX(0.36) !important;
    }
}

.header-nav .nav-link.active {
    color: var(--text-primary) !important;
}

.header-nav .nav-link.active::after,
.header-nav .nav-link.active:hover::after {
    background: var(--accent) !important;
    transform: scaleX(1) !important;
}

.header-nav .nav-link:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: -4px !important;
}

.header-nav .nav-link.disabled,
.header-nav .nav-link[aria-disabled='true'],
.header-nav .nav-link[data-state='loading'] {
    color: var(--text-muted) !important;
    cursor: not-allowed !important;
    opacity: 0.48 !important;
}

.header-nav .nav-link[data-state='error']::after {
    background: var(--negative) !important;
    transform: scaleX(1) !important;
}

.header-nav .nav-link[data-state='success']::after {
    background: var(--positive) !important;
    transform: scaleX(1) !important;
}

/* Language control: label is optically centred independently of the chevron. */
.language-trigger {
    position: relative !important;
    width: 124px !important;
    min-width: 124px !important;
    height: 44px !important;
    padding: 0 32px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    line-height: 1 !important;
}

.language-trigger svg {
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
}

.language-trigger[aria-expanded='true'] svg {
    transform: translateY(-50%) rotate(180deg) !important;
}

.language-trigger:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px !important;
}

.language-trigger:disabled,
.language-trigger[data-state='loading'] {
    color: var(--text-muted) !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

.language-trigger[data-state='error'] {
    border-color: var(--negative) !important;
}

.language-trigger[data-state='success'] {
    border-color: var(--positive) !important;
}

/* Realized average: a small ledger badge that remains legible over the chart. */
.ticker-realized-avg {
    top: 51% !important;
    min-width: 132px !important;
    min-height: 48px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    grid-template-rows: 20px 28px !important;
    grid-template-areas:
        'period label'
        'period value' !important;
    align-items: center !important;
    gap: 0 !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
}

.ticker-realized-period {
    grid-area: period !important;
    width: 100% !important;
    height: 100% !important;
    display: grid !important;
    place-items: center !important;
    color: var(--accent) !important;
    border-right: 1px solid var(--border-primary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
}

.ticker-realized-label {
    grid-area: label !important;
    align-self: end !important;
    padding: 0 8px 1px !important;
    color: var(--text-tertiary) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.57rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-align: left !important;
}

.ticker-realized-value {
    grid-area: value !important;
    align-self: start !important;
    padding: 2px 8px 0 !important;
    color: var(--text-primary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-align: left !important;
    letter-spacing: -0.025em !important;
}

.ticker-card:hover .ticker-realized-avg {
    border-color: var(--text-muted) !important;
}

/* Exchange selector: dense ledger rows, compact controls, no oversized red switches. */
.exm-overlay {
    padding: 24px !important;
    align-items: center !important;
    justify-content: center !important;
}

.exm {
    width: min(920px, 94vw) !important;
    max-width: 920px !important;
    max-height: min(82vh, 780px) !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    box-shadow: none !important;
}

.exm-header {
    min-height: 80px !important;
    padding: 16px 20px !important;
    align-items: center !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

.exm-header-info {
    gap: 4px !important;
}

.exm-title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.025em !important;
}

.exm-subtitle {
    color: var(--text-tertiary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em !important;
}

.exm-actions {
    display: flex !important;
    gap: 24px !important;
    min-height: 48px !important;
    padding: 0 20px !important;
    align-items: stretch !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

.exm-action-btn {
    position: relative !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 1px !important;
    color: var(--text-tertiary) !important;
    background: transparent !important;
    border: 0 !important;
    font-family: var(--font-sans) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    transition: color var(--transition-fast), opacity var(--transition-fast) !important;
}

.exm-action-btn::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform var(--transition-fast);
}

@media (hover: hover) {
    .exm-action-btn:hover:not(:disabled) {
        color: var(--text-secondary) !important;
    }
}

.exm-action-btn.active {
    color: var(--text-primary) !important;
    background: transparent !important;
}

.exm-action-btn.active::after {
    transform: scaleX(1);
}

.exm-action-btn:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: -3px !important;
}

.exm-action-btn:disabled,
.exm-action-btn[data-state='loading'] {
    color: var(--text-muted) !important;
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

.exm-body {
    padding: 8px 20px 20px !important;
}

.exm-section {
    margin-top: 12px !important;
}

.exm-section-label {
    position: static !important;
    padding: 12px 0 8px !important;
    color: var(--text-tertiary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-align: left !important;
}

.exm-section-label::before,
.exm-section-label::after {
    display: none !important;
}

.exm-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 0 !important;
    border-top: 1px solid var(--border-primary) !important;
}

.exm-row {
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 18px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    color: var(--text-primary) !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    opacity: 1 !important;
    transition: background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast) !important;
}

@media (hover: hover) {
    .exm-row:hover:not(.disabled) {
        background: var(--bg-hover) !important;
        opacity: 1 !important;
    }
}

.exm-row.disabled,
.exm-row:has(input:disabled),
.exm-row[data-state='loading'] {
    color: var(--text-muted) !important;
    opacity: 0.42 !important;
    cursor: not-allowed !important;
}

.exm-toggle {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
}

.exm-toggle input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
}

.exm-toggle-track {
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    background: transparent !important;
    border: 1px solid var(--text-muted) !important;
    box-shadow: none !important;
}

.exm-toggle-track::after {
    content: '' !important;
    position: absolute !important;
    inset: 4px !important;
    width: auto !important;
    height: auto !important;
    background: var(--accent) !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: scale(0) !important;
    transition: transform var(--transition-fast) !important;
}

.exm-toggle input:checked + .exm-toggle-track {
    background: transparent !important;
    border-color: var(--accent) !important;
}

.exm-toggle input:checked + .exm-toggle-track::after {
    transform: scale(1) !important;
}

.exm-toggle input:focus-visible + .exm-toggle-track {
    outline: 2px solid var(--accent) !important;
    outline-offset: 3px !important;
}

.exm-name {
    overflow: hidden !important;
    color: inherit !important;
    font-family: var(--font-sans) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.exm-pairs {
    color: var(--text-tertiary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    font-variant-numeric: tabular-nums !important;
    text-align: right !important;
}

.exm-row[data-state='error'] .exm-name {
    color: var(--negative) !important;
}

.exm-row[data-state='success'] .exm-name {
    color: var(--positive) !important;
}

@media (max-width: 760px) {
    .header-nav {
        gap: 16px !important;
    }

    .header-nav .nav-icon {
        font-size: 0.8rem !important;
    }

    .exm-overlay {
        padding: 12px !important;
    }

    .exm-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 16px !important;
    }
}

@media (max-width: 500px) {
    .exm-actions {
        gap: 16px !important;
        overflow-x: auto !important;
    }

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

@media (prefers-reduced-motion: reduce) {
    .header-nav .nav-link,
    .header-nav .nav-link::after,
    .language-trigger svg,
    .ticker-realized-avg,
    .exm-action-btn,
    .exm-action-btn::after,
    .exm-row,
    .exm-toggle-track::after {
        transition-duration: 0.01ms !important;
    }
}

.header-nav .nav-link[hidden] {
    display: none !important;
}

.header-nav .nav-link:active:not(.disabled) {
    color: var(--text-primary) !important;
}

.language-trigger:active:not(:disabled) {
    background: var(--bg-active) !important;
}

.exm-action-btn:active:not(:disabled) {
    color: var(--text-primary) !important;
}

.exm-row:active:not(.disabled) {
    background: var(--bg-active) !important;
}

.exm-toggle input:disabled + .exm-toggle-track {
    border-color: var(--text-muted) !important;
    cursor: not-allowed !important;
}

/* Hallmark · component: token title · genre: modern-minimal · theme: existing project
 * states: default · hover · focus · active · disabled
 * contrast: inherited project tokens
 * critique: P5 · H5 · E5 · S5 · R5 · V4
 */
#strategy-overlay .strategy-title-button {
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    justify-self: start;
    align-self: center;
    margin: 0;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: color 150ms var(--ease-out);
}

#strategy-overlay .strategy-title-button::after {
    content: none;
}

@media (hover: hover) {
    #strategy-overlay .strategy-title-button:hover {
        color: var(--accent);
        background: transparent;
    }
}

#strategy-overlay .strategy-title-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    color: var(--accent);
}

#strategy-overlay .strategy-title-button:active {
    background: transparent;
    color: var(--accent-hover);
}

#strategy-overlay .strategy-title-button:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.5;
}


/* Hallmark · component: spread chart tooltip · genre: modern-minimal · theme: FomoPerp workbench
 * passive states: hidden · visible · single-series · multi-series · edge-flip
 * contrast: pass
 */
.spread-chart-tooltip {
    position: absolute;
    z-index: 2600;
    min-width: 176px;
    max-width: min(280px, calc(100vw - 16px));
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    transform: translateY(2px);
    pointer-events: none;
    transition:
        opacity 90ms linear,
        transform 90ms linear;
    font-family: var(--font-sans);
    overflow: clip;
}

.spread-chart-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.spread-chart-tooltip-date {
    padding: 8px 10px 7px;
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.spread-chart-tooltip-rows {
    display: grid;
    gap: 7px;
    padding: 9px 10px 10px;
}

.spread-chart-tooltip-row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    min-width: 0;
}

.spread-chart-tooltip-row + .spread-chart-tooltip-row {
    padding-top: 7px;
    border-top: 1px solid var(--border-subtle);
}

.spread-chart-tooltip-swatch {
    width: 12px;
    height: 2px;
    background: var(--text-muted);
}

.spread-chart-tooltip-row.is-positive .spread-chart-tooltip-swatch {
    background: var(--positive);
}

.spread-chart-tooltip-row.is-negative .spread-chart-tooltip-swatch {
    background: var(--negative);
}

.spread-chart-tooltip-label {
    min-width: 0;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.005em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spread-chart-tooltip-label.has-exchange-logo {
    display: inline-flex;
    align-items: center;
}

.spread-chart-tooltip-label.has-exchange-logo .ex-logo {
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.45em;
}

.spread-chart-tooltip-value {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.spread-chart-tooltip-row.is-positive .spread-chart-tooltip-value {
    color: var(--positive);
}

.spread-chart-tooltip-row.is-negative .spread-chart-tooltip-value {
    color: var(--negative);
}

@media (prefers-reduced-motion: reduce) {
    .spread-chart-tooltip {
        transition-duration: 0ms;
        transform: none;
    }
}

/* Hallmark · component: realized-average marker · genre: modern-minimal · theme: FomoPerp workbench
 * passive states: default · chart-overlay · hover-parent
 * contrast: pass
 */
#anomaly-ticker .ticker-card .ticker-realized-avg {
    top: 51% !important;
    width: auto !important;
    min-width: 184px !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-primary) !important;
    color: var(--text-primary) !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

#anomaly-ticker .ticker-card .ticker-realized-period {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 100% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--accent) !important;
    border: 0 !important;
    border-right: 1px solid var(--border-primary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
}

#anomaly-ticker .ticker-card .ticker-realized-label {
    flex: 0 0 auto !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    color: var(--text-tertiary) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.075em !important;
    text-align: left !important;
}

#anomaly-ticker .ticker-card .ticker-realized-value {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    padding: 0 8px 0 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    color: var(--text-primary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: right !important;
    letter-spacing: -0.02em !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}

/* Hallmark · component: realized-spread identity · genre: modern-minimal · theme: FomoPerp workbench
 * passive states: desktop · compact
 * contrast: inherited pass
 */
#history-table-modal > .modal-header {
    align-items: flex-start !important;
}

#history-table-modal .history-modal-heading--spread {
    align-items: start !important;
}

#history-table-modal .history-detail-identity {
    align-self: start !important;
    justify-self: start !important;
    align-content: start !important;
    justify-items: start !important;
    text-align: left !important;
    padding-block-start: var(--space-xs) !important;
}

#history-table-modal .history-detail-period {
    align-self: start !important;
    align-content: start !important;
}

#history-table-modal #history-table-title {
    margin: 0 !important;
}

/* Hallmark · component: backtest action · centered text-only treatment */
#strategy-overlay .strategy-backtest-btn {
    justify-content: center !important;
    gap: 0 !important;
    text-align: center !important;
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4
 * component: realized-spread period control · genre: modern-minimal
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: pass · slop: pass
 */
#history-table-modal .history-detail-period {
    grid-template-columns: auto auto !important;
    align-items: center !important;
    align-content: start !important;
    justify-items: stretch !important;
    justify-self: end !important;
    gap: var(--space-sm) !important;
}

#history-table-modal .history-detail-period > .history-detail-label {
    min-height: 20px;
    margin: 0 !important;
    padding-inline-end: var(--space-sm);
    display: inline-flex;
    align-items: center;
    border-right: 1px solid var(--border-primary);
    line-height: 1;
}

#history-table-modal .history-timeframe-selector {
    width: auto !important;
    min-height: 44px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(48px, 1fr)) !important;
    overflow: hidden;
    border: 1px solid var(--border-primary) !important;
    background: var(--bg-secondary) !important;
}

#history-table-modal .history-timeframe-btn {
    min-width: 48px !important;
    min-height: 44px !important;
    padding: 0 var(--space-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-right: 1px solid var(--border-subtle) !important;
    outline: 2px solid transparent;
    outline-offset: -3px;
    background: var(--bg-secondary) !important;
    color: var(--text-tertiary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.68rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    letter-spacing: 0.035em !important;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--transition-fast), color var(--transition-fast) !important;
}

#history-table-modal .history-timeframe-btn:last-child {
    border-right: 0 !important;
}

#history-table-modal .history-timeframe-btn.active,
#history-table-modal .history-timeframe-btn[aria-pressed="true"] {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 -2px 0 var(--accent) !important;
}

@media (hover: hover) {
    #history-table-modal .history-timeframe-btn:hover:not(:disabled):not(.active) {
        background: var(--bg-hover) !important;
        color: var(--text-secondary) !important;
    }
}

#history-table-modal .history-timeframe-btn:focus-visible {
    outline-color: var(--accent) !important;
}

#history-table-modal .history-timeframe-btn:active:not(:disabled) {
    transform: translateY(1px);
}

#history-table-modal .history-timeframe-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

#history-table-modal .history-timeframe-btn[data-state="loading"] {
    color: var(--text-muted) !important;
}

#history-table-modal .history-timeframe-btn[data-state="error"][aria-pressed="true"] {
    color: var(--negative) !important;
}

#history-table-modal .history-timeframe-btn[data-state="success"][aria-pressed="true"] {
    color: var(--text-primary) !important;
    box-shadow: inset 0 -2px 0 var(--accent) !important;
}

@media (max-width: 640px) {
    #history-table-modal .history-detail-identity {
        padding-block-start: 0 !important;
    }

    #history-table-modal .history-detail-period {
        width: 100%;
        grid-template-columns: auto minmax(0, 1fr) !important;
        justify-self: stretch !important;
    }

    #history-table-modal .history-timeframe-selector {
        width: 100% !important;
    }

    #history-table-modal .history-timeframe-btn {
        min-width: 0 !important;
        padding-inline: var(--space-xs) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #history-table-modal .history-timeframe-btn {
        transition-duration: 0ms !important;
    }

    #history-table-modal .history-timeframe-btn:active:not(:disabled) {
        transform: none;
    }
}

/* Hallmark · component: Markets daily-series inspection
 * pre-emit critique: P5 H5 E5 S5 R5 V5
 * states: default · hover · focus · active · loading · empty · error · ready
 * genre: restrained technical workbench · theme: existing FomoPerp system
 * contrast: pass · honest data: pass */
.ex-card-chart {
    isolation: isolate;
}

.ex-card-chart canvas {
    position: relative;
    z-index: 1;
    border: 0;
}

.ex-card-chart canvas:focus-visible {
    outline: 2px solid var(--text-secondary);
    outline-offset: 2px;
}

.market-chart-tooltip {
    --market-tooltip-x: 4px;
    --market-tooltip-y: 4px;
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 3;
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    gap: 8px;
    min-width: max-content;
    padding: 8px 12px;
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(var(--market-tooltip-x), var(--market-tooltip-y), 0);
    transition: opacity 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.market-chart-tooltip.is-visible {
    opacity: 1;
}

.market-chart-tooltip__date {
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.08em;
    color: var(--text-tertiary);
    text-transform: uppercase;
    white-space: nowrap;
}

.market-chart-tooltip__value {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ex-card-chart.is-pending .market-chart-tooltip,
.ex-card-chart[data-state="empty"] .market-chart-tooltip,
.ex-card-chart[data-state="error"] .market-chart-tooltip {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .market-chart-tooltip {
        transition-duration: 0.01ms;
    }
}

/* Hallmark · component: exchange filter actions · genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * States: default · hover · focus · active · disabled · loading · error · success
 * Critique: P5 H5 E5 S5 R5 V5 · contrast: pass
 */
.exm-actions {
    gap: var(--space-xs) !important;
    min-height: 68px !important;
    padding: var(--space-sm) var(--space-md) !important;
    align-items: center !important;
    overflow-x: auto !important;
    scrollbar-width: none;
}

.exm-actions::-webkit-scrollbar {
    display: none;
}

.exm-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 72px !important;
    min-height: 44px !important;
    padding: 0 var(--space-md) !important;
    color: var(--text-tertiary) !important;
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-primary) !important;
    outline: 2px solid transparent !important;
    outline-offset: 2px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition:
        color 120ms var(--ease-out),
        background-color 120ms var(--ease-out),
        border-color 120ms var(--ease-out),
        opacity 120ms var(--ease-out) !important;
}

.exm-action-btn::after {
    display: none !important;
}

@media (hover: hover) {
    .exm-action-btn:hover:not(:disabled):not([data-state='loading']) {
        color: var(--text-secondary) !important;
        background: var(--bg-hover) !important;
        border-color: var(--text-muted) !important;
    }
}

.exm-action-btn.active,
.exm-action-btn[aria-pressed='true'] {
    color: var(--text-primary) !important;
    background: var(--bg-tertiary) !important;
    border-color: var(--accent) !important;
}

.exm-action-btn:focus-visible {
    outline-color: var(--text-primary) !important;
    outline-offset: 2px !important;
    border-color: var(--text-secondary) !important;
}

.exm-action-btn:active:not(:disabled):not([data-state='loading']) {
    color: var(--text-primary) !important;
    background: var(--bg-active) !important;
}

.exm-action-btn:disabled {
    color: var(--text-muted) !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

.exm-action-btn[data-state='loading'] {
    color: var(--text-muted) !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-primary) !important;
    opacity: 0.6 !important;
    cursor: wait !important;
}

.exm-action-btn[data-state='error'] {
    color: var(--negative) !important;
    background: var(--negative-bg) !important;
    border-color: var(--negative-dim) !important;
}

.exm-action-btn[data-state='success'] {
    color: var(--positive) !important;
    background: var(--positive-bg) !important;
    border-color: var(--positive-dim) !important;
}

@media (prefers-reduced-motion: reduce) {
    .exm-action-btn {
        transition-duration: 0.01ms !important;
    }
}

@media (hover: hover) {
    .exm-actions .exm-action-btn.active:hover:not(:disabled):not([data-state='loading']),
    .exm-actions .exm-action-btn[aria-pressed='true']:hover:not(:disabled):not([data-state='loading']) {
        color: var(--text-primary) !important;
        background: var(--bg-tertiary) !important;
        border-color: var(--accent) !important;
    }
}

/* Hallmark · component: asset-detail identity · genre: modern-minimal
 * Theme: existing FomoHub technical ledger · typography parity: realized-spread identity
 * Critique: P5 H5 E5 S5 R5 V5 · contrast: inherited pass
 */
#detail-modal #modal-title {
    font-size: clamp(1.24rem, 2vw, 1.55rem) !important;
}

/* Hallmark · component: shared chart-mode control · genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * States: default · hover · focus · active · disabled · loading · error · success
 * Critique: P5 H5 E5 S5 R5 V5 · visual parity: strategy + backtest
 */
:is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) {
    height: 30px;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    box-sizing: border-box;
}

:is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn {
    height: 28px;
    min-height: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 var(--space-sm);
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: 2px solid transparent;
    outline-offset: -3px;
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.62rem;
    font-weight: 680;
    line-height: 1;
    vertical-align: top;
    white-space: nowrap;
    box-shadow: none;
    box-sizing: border-box;
    transition:
        color 120ms var(--ease-out),
        background-color 120ms var(--ease-out),
        border-color 120ms var(--ease-out),
        opacity 120ms var(--ease-out);
}

:is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn + .strategy-chart-mode-btn {
    border-left: 1px solid var(--border-primary);
}

@media (hover: hover) {
    :is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn:hover:not(:disabled):not([data-state='loading']) {
        color: var(--text-secondary);
        background: var(--bg-hover);
    }
}

:is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn.active,
:is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn[aria-pressed='true'] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-primary);
}

:is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn:focus-visible {
    outline-color: var(--text-primary);
}

:is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn:active:not(:disabled):not([data-state='loading']) {
    background: var(--bg-active);
    color: var(--text-primary);
}

:is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn.active:active:not(:disabled),
:is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn[aria-pressed='true']:active:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

:is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn:disabled {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-muted);
    opacity: 0.45;
    cursor: not-allowed;
}

:is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn[data-state='loading'] {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-muted);
    opacity: 0.6;
    cursor: wait;
}

:is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn[data-state='error'] {
    background: var(--negative-bg);
    border-color: var(--negative-dim);
    color: var(--negative);
}

:is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn[data-state='success'] {
    background: var(--positive-bg);
    border-color: var(--positive-dim);
    color: var(--positive);
}

@media (prefers-reduced-motion: reduce) {
    :is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn {
        transition-duration: 0.01ms;
    }
}

@media (hover: hover) {
    :is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn.active:hover:not(:disabled):not([data-state='loading']),
    :is(#strategy-chart-mode-selector, #backtest-chart-mode-selector, #backtest-pnl-mode-selector) .strategy-chart-mode-btn[aria-pressed='true']:hover:not(:disabled):not([data-state='loading']) {
        background: var(--accent);
        border-color: var(--accent);
        color: var(--text-primary);
    }
}

@media (max-width: 760px) {
    .backtest-pnl-chart-header,
    .backtest-pnl-chart-tools {
        align-items: flex-start;
        flex-direction: column;
    }

    .backtest-pnl-chart-header,
    .backtest-pnl-chart-tools,
    #backtest-pnl-mode-selector {
        width: 100%;
    }

    #backtest-pnl-mode-selector {
        grid-auto-columns: 1fr;
    }
}

/* Hallmark · component: historical-spread heading · genre: modern-minimal
 * Theme: existing FomoHub technical ledger · visual parity: strategy + backtest
 * Critique: P5 H5 E5 S5 R5 V5
 */
#strategy-overlay .strategy-chart-header h3,
#backtest-overlay .backtest-chart-header h3 {
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* Hallmark · component: realized-average inline marker · genre: modern-minimal
 * Theme: existing FomoHub technical ledger · alignment: single baseline
 * Critique: P5 H5 E5 S5 R5 V5
 */
#anomaly-ticker .ticker-card .ticker-realized-avg {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
}

#anomaly-ticker .ticker-card .ticker-realized-period,
#anomaly-ticker .ticker-card .ticker-realized-label,
#anomaly-ticker .ticker-card .ticker-realized-value {
    grid-area: auto !important;
    align-self: center !important;
    line-height: 1 !important;
}

#anomaly-ticker .ticker-card .ticker-realized-label {
    justify-content: center !important;
}

/* Hallmark · component: backtest action · neutral frame, no accent stripe */
#strategy-overlay .strategy-backtest-btn {
    border-left: 1px solid var(--border-primary) !important;
}

@media (hover: hover) {
    #strategy-overlay .strategy-backtest-btn:hover:not(:disabled) {
        border-left-color: var(--border-primary) !important;
    }
}

/* Hallmark · component: language trigger · genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * States: default · hover · focus · active · disabled · loading · error · success
 * Critique: P5 H5 E5 S5 R5 V5 · alignment: centred label group
 */
.language-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-sm) !important;
    padding-inline: var(--space-md) !important;
    text-align: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.language-trigger svg {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
    flex: 0 0 auto !important;
}

.language-trigger[aria-expanded='true'] svg {
    transform: rotate(180deg) !important;
}

@media (prefers-reduced-motion: reduce) {
    .language-trigger svg {
        transition-duration: 0.01ms !important;
    }
}

/* Hallmark - component: shared token identity - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Scope: primary token headings only; table and card labels stay unchanged
 * Critique: P5 H5 E5 S5 R5 V5 - hierarchy: compact cross-view token identity
 */
:root {
    --text-token-title: clamp(1.25rem, 1.9vw, 1.5rem);
}

:is(
    #strategy-overlay #strategy-title,
    #backtest-overlay #backtest-title,
    #single-ex-modal #single-ex-title,
    #detail-modal #modal-title,
    #history-table-modal #history-table-title
) {
    font-family: var(--font-sans) !important;
    font-size: var(--text-token-title) !important;
    font-weight: 720 !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: -0.035em !important;
    white-space: nowrap;
    min-width: 0;
}

/* Hallmark - component: funding history period switcher - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * States: default - hover - focus - active - disabled - loading - error - success
 * Critique: P5 H5 E5 S5 R5 V5 - parity: realized-spread period control
 */
#single-ex-modal .chart-timeframe-selector {
    display: inline-grid;
    grid-template-columns: auto repeat(4, minmax(48px, 1fr));
    align-items: stretch;
    min-height: 44px;
    gap: 0;
    border: 0;
    background: transparent;
}

#single-ex-modal .chart-timeframe-selector::before {
    content: 'PERIOD';
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin-right: var(--space-sm);
    padding-right: var(--space-md);
    border-right: 1px solid var(--border-primary);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1;
}

#single-ex-modal .strategy-chart-tf-btn {
    min-width: 48px;
    height: 44px;
    padding: 0 var(--space-sm);
    border: 1px solid var(--border-primary);
    border-right: 0;
    background: var(--bg-secondary);
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    line-height: 1;
    box-shadow: none;
    transition:
        background-color 150ms var(--ease-out),
        color 150ms var(--ease-out),
        transform 100ms var(--ease-out);
}

#single-ex-modal .strategy-chart-tf-btn:last-child {
    border-right: 1px solid var(--border-primary);
}

#single-ex-modal .strategy-chart-tf-btn.active,
#single-ex-modal .strategy-chart-tf-btn[aria-pressed='true'] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 var(--accent);
}

@media (hover: hover) {
    #single-ex-modal .strategy-chart-tf-btn:hover:not(:disabled):not(.active) {
        background: var(--bg-hover);
        color: var(--text-secondary);
    }
}

#single-ex-modal .strategy-chart-tf-btn:focus-visible {
    outline: 2px solid var(--text-secondary);
    outline-offset: 1px;
}

#single-ex-modal .strategy-chart-tf-btn:active:not(:disabled) {
    transform: translateY(1px);
}

#single-ex-modal .strategy-chart-tf-btn:disabled,
#single-ex-modal .strategy-chart-tf-btn[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
}

#single-ex-modal .strategy-chart-tf-btn[data-state='loading'] {
    color: var(--text-muted);
}

#single-ex-modal .strategy-chart-tf-btn[data-state='error'] {
    color: var(--negative);
}

#single-ex-modal .strategy-chart-tf-btn[data-state='success'].active {
    color: var(--positive);
}

@media (max-width: 640px) {
    #single-ex-modal .strategy-chart-header {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-sm);
        padding-block: var(--space-sm);
    }

    #single-ex-modal .chart-timeframe-selector {
        width: 100%;
        grid-template-columns: auto repeat(4, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    #single-ex-modal .strategy-chart-tf-btn {
        transition-duration: 0ms;
        transform: none !important;
    }
}

/* Hallmark - component: funding-detail header and context bar - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Parity target: realized-spread detail modal
 * States: default - hover - focus - active - disabled - loading - error - success
 * Critique: P5 H5 E5 S5 R5 V5 - hierarchy and responsive fit pass
 */
#single-ex-history-table-modal > .modal-header {
    min-height: calc(var(--space-xl) * 2);
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: var(--space-md) calc(var(--space-lg) * 3) var(--space-md) var(--space-lg) !important;
    background: #10100f !important;
}

#single-ex-history-table-modal .history-modal-heading--funding {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    justify-items: stretch;
    gap: var(--space-lg);
}

#single-ex-history-table-modal .history-detail-identity {
    min-width: 0;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--space-xs);
    text-align: left;
    padding-block-start: var(--space-xs);
}

#single-ex-history-table-modal .history-detail-label {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#single-ex-history-table-modal #single-ex-history-table-title {
    width: auto;
    max-width: 100%;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-sans) !important;
    font-size: var(--text-token-title) !important;
    font-weight: 720 !important;
    line-height: 1;
    letter-spacing: -0.035em !important;
    text-align: left;
    white-space: nowrap;
}

#single-ex-history-table-modal #single-ex-history-table-token {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#single-ex-history-table-modal .history-detail-market {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

#single-ex-history-table-modal .history-detail-context {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

#single-ex-history-table-modal .history-detail-context-bar {
    min-width: 0;
    padding: var(--space-sm) var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

#single-ex-history-table-modal .history-detail-period {
    min-width: 0;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    align-content: start;
    justify-items: stretch;
    justify-self: end;
    gap: var(--space-sm);
}

#single-ex-history-table-modal .history-detail-period > .history-detail-label {
    min-height: 20px;
    margin: 0;
    padding-inline-end: var(--space-sm);
    display: inline-flex;
    align-items: center;
    border-right: 1px solid var(--border-primary);
}

#single-ex-history-table-modal .history-timeframe-selector {
    width: auto !important;
    min-height: 44px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(48px, 1fr)) !important;
    overflow: hidden;
    border: 1px solid var(--border-primary) !important;
    background: var(--bg-secondary) !important;
}

#single-ex-history-table-modal .history-timeframe-btn {
    min-width: 48px !important;
    min-height: 44px !important;
    padding: 0 var(--space-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-right: 1px solid var(--border-subtle) !important;
    outline: 2px solid transparent;
    outline-offset: -3px;
    background: var(--bg-secondary) !important;
    color: var(--text-tertiary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.68rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    letter-spacing: 0.035em !important;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--transition-fast), color var(--transition-fast) !important;
}

#single-ex-history-table-modal .history-timeframe-btn:last-child {
    border-right: 0 !important;
}

#single-ex-history-table-modal .history-timeframe-btn.active,
#single-ex-history-table-modal .history-timeframe-btn[aria-pressed='true'] {
    background: var(--bg-elevated) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 -2px 0 var(--accent) !important;
}

@media (hover: hover) {
    #single-ex-history-table-modal .history-timeframe-btn:hover:not(:disabled):not(.active) {
        background: var(--bg-hover) !important;
        color: var(--text-secondary) !important;
    }
}

#single-ex-history-table-modal .history-timeframe-btn:focus-visible {
    outline-color: var(--accent) !important;
}

#single-ex-history-table-modal .history-timeframe-btn:active:not(:disabled) {
    transform: translateY(1px);
}

#single-ex-history-table-modal .history-timeframe-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

#single-ex-history-table-modal .history-timeframe-btn[data-state='loading'] {
    color: var(--text-muted) !important;
}

#single-ex-history-table-modal .history-timeframe-btn[data-state='error'][aria-pressed='true'] {
    color: var(--negative) !important;
}

#single-ex-history-table-modal .history-timeframe-btn[data-state='success'][aria-pressed='true'] {
    color: var(--text-primary) !important;
    box-shadow: inset 0 -2px 0 var(--accent) !important;
}

@media (max-width: 640px) {
    #single-ex-history-table-modal > .modal-header {
        min-height: 0;
        padding: var(--space-md) calc(var(--space-lg) * 2 + var(--space-xs)) var(--space-md) var(--space-md) !important;
    }

    #single-ex-history-table-modal .history-modal-heading--funding {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-sm);
    }

    #single-ex-history-table-modal .history-detail-identity {
        padding-block-start: 0;
    }

    #single-ex-history-table-modal .history-detail-context-bar {
        padding-inline: var(--space-md);
    }

    #single-ex-history-table-modal .history-detail-period {
        width: 100%;
        grid-template-columns: auto minmax(0, 1fr);
        justify-self: stretch;
    }

    #single-ex-history-table-modal .history-timeframe-selector {
        width: 100% !important;
    }

    #single-ex-history-table-modal .history-timeframe-btn {
        min-width: 0 !important;
        padding-inline: var(--space-xs) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #single-ex-history-table-modal .history-timeframe-btn {
        transition-duration: 0ms !important;
    }

    #single-ex-history-table-modal .history-timeframe-btn:active:not(:disabled) {
        transform: none;
    }
}

/* Hallmark - component: single-exchange metric cards - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Parity target: realized-spread metric cards
 * States: default - hover - focus - active - disabled - loading - error - success
 * Critique: P5 H5 E5 S5 R5 V5 - same component, same visual grammar
 */
#single-ex-modal .strategy-chart-stats-grid {
    gap: 8px;
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: 0;
}

#single-ex-modal .strategy-chart-stat-card {
    min-height: 62px;
    display: grid;
    grid-template-rows: 12px 20px;
    align-content: center;
    justify-items: center;
    gap: 5px;
    padding: 8px 12px;
    box-sizing: border-box;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 0;
    box-shadow: none;
    text-align: center;
}

#single-ex-modal .strategy-chart-stat-card:hover {
    background: var(--bg-hover);
    border-color: var(--border-primary);
    transform: none;
}

#single-ex-modal .strategy-chart-stat-label {
    min-width: 0;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: 0.03em;
    text-align: center;
}

#single-ex-modal .strategy-chart-stat-value {
    min-width: 0;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 20px;
    letter-spacing: normal;
    text-align: center;
}

/* Hallmark - component: backtest selector controls - genre: modern-minimal - theme: FomoHub technical ledger
 * states: default - hover - focus - active - disabled - loading - error - success
 * critique: P5 H5 E5 S5 R5 V5 - contrast: pass - responsive: pass
 */
.backtest-selectors-row {
    --backtest-control-height: 44px;
    width: min(100%, 720px);
    display: grid !important;
    grid-template-columns: 128px minmax(208px, 1fr) 44px minmax(208px, 1fr);
    align-items: stretch !important;
    gap: var(--space-xs) !important;
    margin-bottom: 0 !important;
    flex-wrap: nowrap !important;
}

.backtest-selectors-row > .strategy-exchange-select-wrapper {
    width: auto !important;
    min-width: 0;
}

:is(
    #backtest-token-select-btn,
    #backtest-long-select-btn,
    #backtest-short-select-btn
) {
    width: 100% !important;
    min-width: 0;
    height: var(--backtest-control-height) !important;
    min-height: var(--backtest-control-height);
    margin: 0 !important;
    padding: 0 var(--space-sm) !important;
    align-items: center !important;
    gap: var(--space-xs) !important;
    overflow: hidden;
    border: 1px solid var(--border-primary) !important;
    border-radius: 0 !important;
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: var(--bg-secondary) !important;
    box-shadow: none !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
    cursor: pointer;
    transition:
        background-color 150ms var(--ease-out),
        border-color 150ms var(--ease-out),
        color 150ms var(--ease-out),
        transform 100ms var(--ease-out) !important;
}

#backtest-token-select-btn {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
}

:is(#backtest-long-select-btn, #backtest-short-select-btn) {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

:is(
    #backtest-token-select-text,
    #backtest-long-select-text,
    #backtest-short-select-text
) {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary) !important;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 720 !important;
    line-height: 1;
    letter-spacing: -0.015em;
    text-align: left !important;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#backtest-long-select-btn, #backtest-short-select-btn) > span:first-child {
    margin: 0 !important;
    font-family: var(--font-mono);
    font-size: 0.62rem !important;
    font-weight: 650 !important;
    line-height: 1;
    letter-spacing: 0.06em !important;
    white-space: nowrap;
}

#backtest-long-select-btn > span:first-child {
    color: var(--positive) !important;
}

#backtest-short-select-btn > span:first-child {
    color: var(--negative) !important;
}

:is(
    #backtest-token-select-btn,
    #backtest-long-select-btn,
    #backtest-short-select-btn
) > svg {
    width: 12px !important;
    height: 12px !important;
    margin: 0 !important;
    opacity: 1 !important;
    color: var(--text-tertiary) !important;
    transition: color 150ms var(--ease-out), transform 150ms var(--ease-out) !important;
}

#backtest-swap-btn {
    width: var(--backtest-control-height) !important;
    min-width: var(--backtest-control-height) !important;
    height: var(--backtest-control-height) !important;
    min-height: var(--backtest-control-height) !important;
    display: grid !important;
    place-items: center;
    align-self: stretch;
    margin: 0;
    padding: 0 !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 0 !important;
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: var(--bg-tertiary) !important;
    box-shadow: none !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    transition:
        background-color 150ms var(--ease-out),
        border-color 150ms var(--ease-out),
        color 150ms var(--ease-out),
        transform 100ms var(--ease-out) !important;
}

#backtest-swap-btn > svg {
    width: 17px !important;
    height: 17px !important;
    display: block;
    stroke-width: 1.65;
}

@media (hover: hover) {
    :is(
        #backtest-token-select-btn,
        #backtest-long-select-btn,
        #backtest-short-select-btn,
        #backtest-swap-btn
    ):hover:not(:disabled):not([aria-disabled='true']):not([data-state='loading']) {
        background: var(--bg-hover) !important;
        border-color: var(--text-muted) !important;
        color: var(--text-primary) !important;
    }
}

:is(
    #backtest-token-select-btn,
    #backtest-long-select-btn,
    #backtest-short-select-btn,
    #backtest-swap-btn
):focus-visible {
    outline-color: var(--text-primary) !important;
}

:is(
    #backtest-token-select-btn,
    #backtest-long-select-btn,
    #backtest-short-select-btn,
    #backtest-swap-btn
):active:not(:disabled):not([aria-disabled='true']):not([data-state='loading']) {
    transform: translateY(1px);
}

.backtest-selectors-row > .strategy-exchange-select-wrapper:has(.strategy-exchange-dropdown:not(.hidden)) > .strategy-exchange-select-btn {
    background: var(--bg-active) !important;
    border-color: var(--text-muted) !important;
}

.backtest-selectors-row > .strategy-exchange-select-wrapper:has(.strategy-exchange-dropdown:not(.hidden)) > .strategy-exchange-select-btn > svg {
    color: var(--text-primary) !important;
    transform: rotate(180deg);
}

.backtest-selectors-row > .strategy-exchange-select-wrapper:has(#backtest-long-dropdown:not(.hidden)) > #backtest-long-select-btn {
    box-shadow: inset 0 -2px 0 var(--positive) !important;
}

.backtest-selectors-row > .strategy-exchange-select-wrapper:has(#backtest-short-dropdown:not(.hidden)) > #backtest-short-select-btn {
    box-shadow: inset 0 -2px 0 var(--negative) !important;
}

:is(
    #backtest-token-select-btn,
    #backtest-long-select-btn,
    #backtest-short-select-btn,
    #backtest-swap-btn
):is(:disabled, [aria-disabled='true']) {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
}

:is(
    #backtest-token-select-btn,
    #backtest-long-select-btn,
    #backtest-short-select-btn,
    #backtest-swap-btn
)[data-state='loading'] {
    color: var(--text-tertiary) !important;
    cursor: progress;
}

:is(
    #backtest-token-select-btn,
    #backtest-long-select-btn,
    #backtest-short-select-btn
)[data-state='loading'] > svg,
:is(
    #backtest-token-select-btn,
    #backtest-long-select-btn,
    #backtest-short-select-btn
)[data-state='error'] > svg,
:is(
    #backtest-token-select-btn,
    #backtest-long-select-btn,
    #backtest-short-select-btn
)[data-state='success'] > svg {
    display: none;
}

:is(
    #backtest-token-select-btn,
    #backtest-long-select-btn,
    #backtest-short-select-btn
)[data-state='loading']::after {
    content: '...';
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.64rem;
}

:is(
    #backtest-token-select-btn,
    #backtest-long-select-btn,
    #backtest-short-select-btn,
    #backtest-swap-btn
)[data-state='error'] {
    border-color: var(--negative-dim) !important;
    color: var(--negative) !important;
}

:is(
    #backtest-token-select-btn,
    #backtest-long-select-btn,
    #backtest-short-select-btn
)[data-state='error']::after {
    content: '!';
    color: var(--negative);
    font-family: var(--font-mono);
    font-weight: 700;
}

:is(
    #backtest-token-select-btn,
    #backtest-long-select-btn,
    #backtest-short-select-btn,
    #backtest-swap-btn
)[data-state='success'] {
    border-color: var(--positive-dim) !important;
    color: var(--positive) !important;
}

:is(
    #backtest-token-select-btn,
    #backtest-long-select-btn,
    #backtest-short-select-btn
)[data-state='success']::after {
    content: '\2713';
    color: var(--positive);
    font-family: var(--font-mono);
    font-weight: 700;
}

@media (max-width: 720px) {
    .backtest-selectors-row {
        width: 100%;
        grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    }

    .backtest-selectors-row > .strategy-exchange-select-wrapper:first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 420px) {
    .backtest-selectors-row {
        gap: 4px !important;
    }

    :is(
        #backtest-token-select-btn,
        #backtest-long-select-btn,
        #backtest-short-select-btn
    ) {
        padding-inline: var(--space-xs) !important;
        gap: 4px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(
        #backtest-token-select-btn,
        #backtest-long-select-btn,
        #backtest-short-select-btn,
        #backtest-swap-btn
    ),
    :is(
        #backtest-token-select-btn,
        #backtest-long-select-btn,
        #backtest-short-select-btn
    ) > svg {
        transition-duration: 0ms !important;
    }

    :is(
        #backtest-token-select-btn,
        #backtest-long-select-btn,
        #backtest-short-select-btn,
        #backtest-swap-btn
    ):active {
        transform: none;
    }
}

/* Hallmark - component: backtest parameter controls - genre: modern-minimal - theme: FomoHub technical ledger
 * states: default - hover - focus - active - disabled - loading - error - success
 * contrast: pass - pre-emit critique: P5 H5 E5 S5 R5 V4
 */
.backtest-controls {
    --bt-control-height: 44px;
    --bt-field-width: 138px;
    --bt-control-duration: 120ms;
    gap: var(--space-md);
}

.backtest-input-group {
    display: grid;
    grid-template-columns: 34px var(--bt-field-width);
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
}

.backtest-input-label {
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.backtest-input-wrap {
    width: var(--bt-field-width);
    height: var(--bt-control-height);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0 var(--space-sm);
    overflow: hidden;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    outline: 2px solid transparent;
    outline-offset: 1px;
    box-shadow: none;
    transition:
        background-color var(--bt-control-duration) var(--ease-out),
        border-color var(--bt-control-duration) var(--ease-out),
        color var(--bt-control-duration) var(--ease-out),
        transform var(--bt-control-duration) var(--ease-out);
}

.backtest-input-prefix,
.backtest-input-suffix {
    flex: 0 0 auto;
    min-width: 20px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}

.backtest-input-prefix {
    padding-inline-end: var(--space-xs);
    border-inline-end: 1px solid var(--border-subtle);
}

.backtest-input-suffix {
    min-width: auto;
    padding: 0;
    color: var(--text-secondary);
    border: 0;
    font-size: 0.74rem;
}

.backtest-input-wrap:has(#backtest-cost) {
    gap: var(--space-2xs);
}

.backtest-input-wrap input {
    min-width: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    outline: 0;
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.backtest-input-wrap:focus-within {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-color: var(--text-tertiary);
    outline-color: var(--accent);
    box-shadow: none;
}

.backtest-input-wrap:has(input:disabled),
.backtest-input-wrap[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.backtest-input-wrap:has(input:disabled) input {
    cursor: not-allowed;
}

.backtest-input-wrap[data-state="loading"],
.backtest-input-wrap[aria-busy="true"] {
    color: var(--text-secondary);
    cursor: progress;
}

.backtest-input-wrap[data-state="error"],
.backtest-input-wrap:has(input[aria-invalid="true"]) {
    border-color: var(--negative);
    outline-color: var(--negative);
}

.backtest-input-wrap[data-state="success"] {
    border-color: var(--positive);
    outline-color: var(--positive);
}

.backtest-tf-selector {
    height: var(--bt-control-height);
    min-width: 244px;
    display: grid;
    grid-template-columns: repeat(4, minmax(44px, 1fr));
    gap: 0;
    padding: 0;
    overflow: hidden;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
}

.backtest-tf-btn {
    position: relative;
    min-width: 44px;
    height: calc(var(--bt-control-height) - 2px);
    padding: 0 var(--space-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    background: transparent;
    border: 0;
    border-block-end: 2px solid transparent;
    border-radius: var(--radius-sm);
    outline: 2px solid transparent;
    outline-offset: -3px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition:
        background-color var(--bt-control-duration) var(--ease-out),
        color var(--bt-control-duration) var(--ease-out),
        transform var(--bt-control-duration) var(--ease-out);
}

.backtest-tf-btn + .backtest-tf-btn {
    border-inline-start: 1px solid var(--border-subtle);
}

.backtest-tf-btn.active,
.backtest-tf-btn[aria-pressed="true"] {
    color: var(--text-primary);
    background: var(--bg-elevated);
    border-block-end-color: var(--accent);
    box-shadow: none;
}

.backtest-tf-btn:focus-visible {
    outline-color: var(--accent);
}

.backtest-tf-btn:active {
    transform: translateY(1px);
}

.backtest-tf-btn:disabled,
.backtest-tf-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.backtest-tf-btn[data-state="loading"],
.backtest-tf-btn[aria-busy="true"] {
    color: var(--text-secondary);
    cursor: progress;
}

.backtest-tf-btn[data-state="error"] {
    color: var(--negative);
    border-block-end-color: var(--negative);
}

.backtest-tf-btn[data-state="success"] {
    color: var(--positive);
    border-block-end-color: var(--positive);
}

@media (hover: hover) and (pointer: fine) {
    .backtest-input-wrap:hover:not(:has(input:disabled)) {
        background: var(--bg-tertiary);
        border-color: var(--text-muted);
    }

    .backtest-tf-btn:hover:not(.active):not(:disabled) {
        color: var(--text-secondary);
        background: var(--bg-hover);
    }
}

@media (max-width: 48rem) {
    .backtest-controls {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-sm);
        margin-inline-start: 0;
    }

    .backtest-input-group {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .backtest-input-wrap,
    .backtest-tf-selector {
        width: 100%;
        min-width: 0;
    }

    .backtest-tf-selector {
        grid-column: 1 / -1;
    }
}

@media (max-width: 30rem) {
    .backtest-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .backtest-tf-selector {
        grid-column: auto;
    }
}

@media (pointer: coarse) {
    .backtest-input-wrap,
    .backtest-tf-selector,
    .backtest-tf-btn {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .backtest-input-wrap,
    .backtest-tf-btn {
        transition: none;
    }

    .backtest-tf-btn:active {
        transform: none;
    }
}
/* Backtest control state indicators reserve their slot to avoid reflow. */
.backtest-input-wrap::after {
    content: "";
    flex: 0 0 14px;
    width: 14px;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.backtest-input-wrap[data-state="loading"]::after,
.backtest-input-wrap[aria-busy="true"]::after {
    content: "…";
    color: var(--text-secondary);
}

.backtest-input-wrap[data-state="error"]::after,
.backtest-input-wrap:has(input[aria-invalid="true"])::after {
    content: "!";
    color: var(--negative);
}

.backtest-input-wrap[data-state="success"]::after {
    content: "✓";
    color: var(--positive);
}

.backtest-tf-btn[data-state="loading"]::after,
.backtest-tf-btn[aria-busy="true"]::after {
    content: "…";
    margin-inline-start: var(--space-2xs);
}

.backtest-tf-btn[data-state="error"]::after {
    content: " !";
}

.backtest-tf-btn[data-state="success"]::after {
    content: " ✓";
}

@media (hover: hover) and (pointer: fine) {
    .backtest-input-wrap:hover:not(:has(input:disabled)) {
        border-color: var(--border-primary);
    }
}
/* Hallmark - component: backtest header layout - genre: modern-minimal - theme: FomoHub technical ledger
 * states: default - hover - focus - active - disabled - loading - error - success
 * contrast: pass - pre-emit critique: P5 H5 E5 S5 R5 V4
 */
.backtest-header {
    display: grid;
    grid-template-columns: auto minmax(10rem, 1fr) auto;
    align-items: center;
    column-gap: var(--space-lg);
    row-gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-panel);
    color: var(--text-primary);
    flex-wrap: initial;
}

.backtest-header .strategy-back {
    min-height: 44px;
    padding: 0 var(--space-md);
    flex: 0 0 auto;
    justify-content: center;
    white-space: nowrap;
}

.backtest-title {
    min-width: 0;
    margin: 0;
    line-height: 1;
    overflow-wrap: anywhere;
    white-space: normal;
}

.backtest-controls {
    width: auto;
    margin-inline-start: 0;
    flex-wrap: nowrap;
}

@media (max-width: 80rem) {
    .backtest-header {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .backtest-controls {
        grid-column: 1 / -1;
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(244px, 1.35fr);
        gap: var(--space-sm);
    }

    .backtest-input-group {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .backtest-input-wrap,
    .backtest-tf-selector {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 48rem) {
    .backtest-header {
        padding: var(--space-sm);
    }

    .backtest-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .backtest-tf-selector {
        grid-column: 1 / -1;
    }
}

@media (max-width: 30rem) {
    .backtest-header {
        column-gap: var(--space-sm);
    }

    .backtest-header .strategy-back {
        padding-inline: var(--space-sm);
    }

    .backtest-controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .backtest-tf-selector {
        grid-column: auto;
    }
}
/* Hallmark - component: backtest numeric alignment - genre: modern-minimal - theme: FomoHub technical ledger
 * states: default - hover - focus - active - disabled - loading - error - success
 * contrast: pass - pre-emit critique: P5 H5 E5 S5 R5 V5
 */
.backtest-input-label {
    height: var(--bt-control-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.backtest-input-wrap {
    --bt-affix-track: 40px;
    position: relative;
    display: grid;
    grid-template-columns: var(--bt-affix-track) minmax(0, 1fr);
    align-items: center;
    gap: 0;
    padding: 0;
}

.backtest-input-wrap input {
    grid-column: 2;
    grid-row: 1;
    padding-inline: var(--space-sm);
    text-align: center;
}

.backtest-input-prefix,
.backtest-input-suffix {
    grid-row: 1;
    width: var(--bt-affix-track);
    min-width: 0;
    height: 100%;
    padding: 0;
    display: grid;
    place-items: center;
}

.backtest-input-prefix {
    grid-column: 1;
}

.backtest-input-suffix {
    grid-column: 2;
    border-inline-start: 1px solid var(--border-subtle);
}

.backtest-input-wrap:has(.backtest-input-suffix) {
    grid-template-columns: minmax(0, 1fr) var(--bt-affix-track);
}

.backtest-input-wrap:has(.backtest-input-suffix) input {
    grid-column: 1;
}

.backtest-input-wrap::after {
    position: absolute;
    inset-block: 0;
    inset-inline-end: var(--space-2xs);
    display: grid;
    place-items: center;
}

.backtest-input-wrap:has(#backtest-cost)::after {
    inset-inline-start: var(--space-2xs);
    inset-inline-end: auto;
}

/* Hallmark - component: inset realized-average marker - genre: modern-minimal - theme: FomoHub technical ledger
 * passive states: default - chart-overlay - hover-parent
 * contrast: pass - pre-emit critique: P5 H5 E5 S5 R5 V5
 */
#anomaly-ticker .ticker-card .ticker-realized-avg {
    min-width: 156px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding-inline: var(--space-2xs) !important;
    gap: var(--space-xs) !important;
    background: var(--bg-secondary) !important;
    border-color: var(--border-subtle) !important;
    border-block-start-color: var(--border-primary) !important;
}

#anomaly-ticker .ticker-card .ticker-realized-period {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 24px !important;
    background: var(--bg-elevated) !important;
    border: 0 !important;
}

#anomaly-ticker .ticker-card .ticker-realized-label {
    padding: 0 !important;
    letter-spacing: 0.065em !important;
}

#anomaly-ticker .ticker-card .ticker-realized-value {
    margin-inline-start: auto !important;
    padding: 0 !important;
}

/* Hallmark - component: backtest back action - genre: modern-minimal - theme: FomoHub technical ledger
 * states: default - hover - focus - active - disabled
 * contrast: pass - pre-emit critique: P5 H5 E5 S5 R5 V5
 */
#backtest-overlay #backtest-back {
    width: max-content !important;
    min-width: 100px !important;
    height: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--space-xs) !important;
    padding: 0 var(--space-md) !important;
    border: 1px solid var(--border-primary) !important;
    background: transparent !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

#backtest-overlay #backtest-back > svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* Hallmark - component: historical detail ledger parity - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Scope: shared surface and rhythm; existing columns and data remain unchanged
 * Critique: P5 H5 E5 S5 R5 V5 - contrast and responsive fit pass
 */
:is(#history-table-modal, #single-ex-history-table-modal) > .modal-header {
    min-height: calc(var(--space-xl) * 2);
    justify-content: flex-start !important;
    align-items: flex-start !important;
    padding: var(--space-md) calc(var(--space-lg) * 3) var(--space-md) var(--space-lg) !important;
    background: var(--bg-secondary) !important;
    border-bottom-color: var(--border-primary) !important;
}

:is(#history-table-modal, #single-ex-history-table-modal) .history-modal-heading {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    justify-items: stretch;
    gap: var(--space-lg);
}

:is(#history-table-modal, #single-ex-history-table-modal) .history-detail-identity {
    min-width: 0;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: var(--space-xs);
    padding-block-start: var(--space-xs);
    text-align: left;
}

:is(#history-table-modal, #single-ex-history-table-modal) .history-detail-label {
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

:is(#history-table-modal, #single-ex-history-table-modal) .modal-title {
    width: auto;
    max-width: 100%;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-sans) !important;
    font-size: var(--text-token-title) !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    letter-spacing: -0.035em !important;
    text-align: left;
    white-space: nowrap;
}

:is(#history-table-modal, #single-ex-history-table-modal) .history-detail-market {
    flex: 0 0 auto;
    color: var(--text-tertiary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.025em;
}

:is(#history-table-modal, #single-ex-history-table-modal) .history-detail-period {
    min-width: 0;
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    align-content: start;
    justify-items: stretch;
    justify-self: end;
    gap: var(--space-sm);
}

:is(#history-table-modal, #single-ex-history-table-modal) .history-detail-period > .history-detail-label {
    min-height: 20px;
    margin: 0;
    padding-inline-end: var(--space-sm);
    display: inline-flex;
    align-items: center;
    border-right: 1px solid var(--border-primary);
}

:is(#history-table-modal, #single-ex-history-table-modal) > .modal-body {
    max-height: min(68vh, 610px) !important;
    background: var(--bg-primary);
    scrollbar-color: var(--text-muted) var(--bg-primary);
}

:is(#history-table-modal, #single-ex-history-table-modal) table {
    table-layout: fixed;
    text-align: center !important;
}

#history-table-modal table {
    min-width: 760px;
}

#single-ex-history-table-modal table {
    min-width: 660px;
}

:is(#history-table-modal, #single-ex-history-table-modal) thead th {
    height: 48px;
    padding: 0 var(--space-lg) !important;
    background: var(--bg-secondary) !important;
    border-right-color: var(--border-subtle);
    border-bottom-color: var(--border-primary);
    color: var(--text-tertiary) !important;
    font-size: 0.58rem;
    letter-spacing: 0.065em;
    text-align: center !important;
}

:is(#history-table-body, #single-ex-history-table-body) > tr,
:is(#history-table-body, #single-ex-history-table-body) > tr:nth-child(even) {
    background: var(--bg-primary) !important;
}

:is(#history-table-body, #single-ex-history-table-body) > tr:hover {
    background: var(--bg-tertiary) !important;
}

:is(#history-table-body, #single-ex-history-table-body) > tr > td {
    height: 48px;
    padding: 0 var(--space-lg) !important;
    background: transparent !important;
    border-right-color: var(--border-subtle);
    border-bottom-color: var(--border-subtle);
    color: var(--text-secondary) !important;
    font-size: 0.72rem;
    font-weight: 560;
    text-align: center !important;
}

:is(#history-table-body, #single-ex-history-table-body) > tr > td:first-child {
    color: var(--text-tertiary) !important;
    font-size: 0.68rem;
}

:is(#history-table-body, #single-ex-history-table-body) span[style*="font-size: 0.75rem"] {
    margin-inline-start: var(--space-xs);
    color: var(--text-muted) !important;
    font-size: 0.58rem !important;
    font-weight: 500;
}

:is(#history-table-body, #single-ex-history-table-body) span[style*="#4caf50"] {
    color: var(--positive) !important;
}

:is(#history-table-body, #single-ex-history-table-body) span[style*="#ff5252"] {
    color: var(--negative) !important;
}

:is(#history-table-body, #single-ex-history-table-body) > tr:last-child:not(:only-child) {
    background: var(--bg-tertiary) !important;
    box-shadow: inset 0 1px 0 var(--border-primary);
}

:is(#history-table-body, #single-ex-history-table-body) > tr:last-child:not(:only-child):hover {
    background: var(--bg-tertiary) !important;
}

:is(#history-table-body, #single-ex-history-table-body) > tr:last-child:not(:only-child) > td {
    height: 56px;
    background: var(--bg-tertiary) !important;
    border-bottom: 0;
    color: var(--text-primary) !important;
    font-size: 0.71rem;
}

:is(#history-table-body, #single-ex-history-table-body) > tr:last-child:not(:only-child) > td:first-child {
    color: var(--text-secondary) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-align: center !important;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    :is(#history-table-modal, #single-ex-history-table-modal) > .modal-header {
        min-height: 0;
        padding: var(--space-md) calc(var(--space-lg) * 2 + var(--space-xs)) var(--space-md) var(--space-md) !important;
    }

    :is(#history-table-modal, #single-ex-history-table-modal) .history-modal-heading {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-sm);
    }

    :is(#history-table-modal, #single-ex-history-table-modal) .history-detail-identity {
        padding-block-start: 0;
    }

    :is(#history-table-modal, #single-ex-history-table-modal) .history-detail-period {
        width: 100%;
        grid-template-columns: auto minmax(0, 1fr);
        justify-self: stretch;
    }
}

/* Hallmark - component: historical ledger typography parity - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Scope: table typography and header rules only; structure and data remain unchanged
 * Critique: P5 H5 E5 S5 R5 V5 - hierarchy, density and alignment pass
 */
:is(#history-table-modal, #single-ex-history-table-modal) thead {
    box-shadow:
        inset 0 1px 0 var(--border-primary),
        inset 0 -1px 0 var(--border-primary);
}

:is(#history-table-modal, #single-ex-history-table-modal) thead th {
    height: 60px !important;
    border-top: 1px solid var(--border-primary) !important;
    border-bottom: 1px solid var(--border-primary) !important;
    color: var(--text-secondary) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.64rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.045em !important;
}

:is(#history-table-body, #single-ex-history-table-body) > tr > td {
    height: 64px !important;
    color: var(--text-secondary) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
    line-height: 1 !important;
}

:is(#history-table-body, #single-ex-history-table-body) > tr > td:first-child {
    color: var(--text-tertiary) !important;
    font-size: 0.72rem !important;
    font-weight: 520 !important;
}

:is(#history-table-body, #single-ex-history-table-body) span[style*="font-size: 0.75rem"] {
    color: var(--text-muted) !important;
    font-size: 0.62rem !important;
    font-weight: 500 !important;
}

:is(#history-table-body, #single-ex-history-table-body) > tr:last-child:not(:only-child) > td {
    height: 64px !important;
    font-size: 0.78rem !important;
    font-weight: 650 !important;
}

:is(#history-table-body, #single-ex-history-table-body) > tr:last-child:not(:only-child) > td:first-child {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.025em !important;
}

/* Hallmark - component: header navigation - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop rail
 *
 * Replaces the underline-on-active rail with a segmented ledger: the nav reads as one
 * bounded strip divided by hairlines, and the active cell is marked by an inset accent
 * bar plus a lifted surface rather than a detached rule floating below the text. Uses
 * the same hairline weights and 0-radius language as the tables and modal panels.
 */
.header-nav {
    gap: 0 !important;
    align-items: center !important;
    align-self: center !important;
    /* An earlier layer sets height:100% and the parent stretches, which would inflate the
       strip to the full 56px header. The strip is a fixed-height control, like the
       language trigger next to it. */
    height: auto !important;
    min-height: 0 !important;
    border: 1px solid var(--border-subtle) !important;
    background: var(--bg-secondary) !important;
}

.header-nav .nav-link {
    position: relative !important;
    /* 32 + the strip's 1px top and bottom border = 34, matching the language trigger. */
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 18px !important;
    overflow: hidden !important;
}

/* Hairline between cells. The adjacent-sibling combinator cannot skip the [hidden]
   Price Arbitrage link, so the divider goes on every cell and is removed from the
   first one instead. An earlier layer kills `.nav-link + .nav-link::before` with
   !important, so the selector here matches that specificity to win on order. */
.header-nav .nav-link + .nav-link::before,
.header-nav .nav-link::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 6px !important;
    bottom: 6px !important;
    right: auto !important;
    width: 1px !important;
    height: auto !important;
    background: var(--border-subtle) !important;
}

.header-nav .nav-link:first-child::before,
.header-nav .nav-link[hidden]:first-child + .nav-link::before {
    display: none !important;
}

.header-nav .nav-icon {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* The active marker is now an inset bar at the top edge of the cell, not a detached
   underline: it stays visually attached to the strip at any nav width. */
.header-nav .nav-link::after {
    top: 0 !important;
    bottom: auto !important;
    height: 2px !important;
    background: var(--accent) !important;
    transform: scaleX(0) !important;
}

@media (hover: hover) {
    .header-nav .nav-link:hover:not(.disabled) {
        background: var(--bg-hover) !important;
    }

    .header-nav .nav-link:hover:not(.disabled)::after {
        background: var(--border-primary) !important;
        transform: scaleX(1) !important;
    }
}

.header-nav .nav-link.active {
    background: var(--bg-active) !important;
}

.header-nav .nav-link.active::after,
.header-nav .nav-link.active:hover::after {
    background: var(--accent) !important;
    transform: scaleX(1) !important;
}

/* Hallmark - component: language trigger sizing - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Critique: P5 H5 E5 S5 R5 V5 - alignment: label + chevron centred as one group
 *
 * The control was a fixed 124px box holding ~56px of content, so the label and chevron
 * floated in dead space. It now shrink-wraps its content: the chevron comes back into
 * flow (an earlier layer pinned it absolute to the right edge, which centred the label
 * alone rather than the pair), and the two centre together as a single group. Height
 * stays 34px so it still lines up with the nav rail beside it.
 */
.language-trigger {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    padding-inline: 12px !important;
    gap: 6px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.language-trigger svg {
    position: static !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    transform: none !important;
}

.language-trigger[aria-expanded='true'] svg {
    transform: rotate(180deg) !important;
}

/* The wrapper was pinned to the trigger's old 124px, so once the trigger shrank to 82px it
   left 42px of dead space to its right - and the dropdown, which anchors to right:0 of the
   wrapper, hung off the trigger's right edge by that much. Letting the wrapper shrink-wrap
   re-aligns the dropdown's right edge with the trigger's. */
#lang-switcher {
    width: auto !important;
}

/* Same reason: the dropdown's 124px floor was sized to the old trigger, so it now spills
   42px past the control's left edge. Matching the trigger and growing only if a longer
   language name needs it keeps the two edges flush. */
#lang-switcher .lang-dropdown {
    min-width: 100% !important;
    width: max-content !important;
}

/* Hallmark - component: markets metrics table typography - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop
 *
 * Aligns the Markets table with the FUNDING SPREAD panel (.arb-tooltip), which is the
 * reference for this typographic register: headers Archivo 0.72rem/700 at 0.12em
 * uppercase in text-tertiary, numeric cells JetBrains Mono 0.72rem/550 at -0.025em.
 * The table was running ~0.57-0.68rem, noticeably smaller and looser than the panel.
 */
#exchanges-dashboard-page #exchanges-metrics-table thead th {
    color: var(--text-tertiary) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}

#exchanges-dashboard-page #exchanges-metrics-tbody td {
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    font-weight: 550 !important;
    letter-spacing: -0.025em !important;
    font-variant-numeric: tabular-nums;
}

/* Exchange name is the leg-exchange equivalent: Archivo 1rem/800, tight tracking. */
#exchanges-dashboard-page #exchanges-metrics-tbody td:nth-child(1) span:first-child {
    font-family: var(--font-sans) !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.05 !important;
}

/* The panel runs a two-tier numeric scale: the headline figure under the exchange name is
   0.86rem/600 in text-primary, every supporting figure is 0.72rem/550 in text-secondary.
   Open Interest and Volume 24H are this table's headline figures; the rest are supporting. */
#exchanges-dashboard-page #exchanges-metrics-tbody td:nth-child(3),
#exchanges-dashboard-page #exchanges-metrics-tbody td:nth-child(4) {
    color: var(--text-primary) !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
}

#exchanges-dashboard-page #exchanges-metrics-tbody td:nth-child(2),
#exchanges-dashboard-page #exchanges-metrics-tbody td:nth-child(5),
#exchanges-dashboard-page #exchanges-metrics-tbody td:nth-child(6),
#exchanges-dashboard-page #exchanges-metrics-tbody td:nth-child(7) {
    color: var(--text-secondary) !important;
    font-size: 0.72rem !important;
    font-weight: 550 !important;
}

/* Deltas (+0.1% / -1.3%) ride alongside the headline figure, so they drop to the panel's
   supporting register rather than to a size the panel never uses. Colour stays inline
   (green/red), which is semantic here and has no equivalent in the panel. */
#exchanges-dashboard-page #exchanges-metrics-tbody td span[style*="font-size: 0.8rem"] {
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    font-weight: 550 !important;
    letter-spacing: -0.025em !important;
}

#exchanges-dashboard-page #exchanges-metrics-table .ex-badge,
#exchanges-dashboard-page #exchanges-metrics-table .token-tag {
    font-family: var(--font-sans) !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
}

#exchanges-dashboard-page #exchanges-metrics-table a[style] {
    font-family: var(--font-sans) !important;
    font-size: 0.68rem !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

/* Eleven nowrap columns at 10px side padding already exceeded the shell by ~15px before
   this pass, and the panel-matching sizes above add another ~22px. Trimming the gutters to
   8px reclaims 44px across the table, which fits it inside the shell with no horizontal
   scroll while leaving the vertical rhythm (45px rows) untouched. */
#exchanges-dashboard-page #exchanges-metrics-table th,
#exchanges-dashboard-page #exchanges-metrics-table td {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* Every header label sits centred in its own column. Ten of the eleven already did; the
   EXCHANGES header carried an inline text-align:left and sat 22px off its column centre,
   which broke the rhythm of the strip. The body cell of that column stays left-aligned so
   the exchange name and its CEX/DEX badge still read as a left-anchored pair. */
#exchanges-dashboard-page #exchanges-metrics-table thead th {
    text-align: center !important;
}

/* Hallmark - component: screener table header typography - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop
 *
 * The exchange columns of the main funding table ran Archivo 0.7rem/600 at 0.04em, a
 * register that exists nowhere else in the app. They now carry the same header label as
 * the Markets table and the FUNDING SPREAD panel: Archivo 0.72rem/700 at 0.12em uppercase
 * in text-tertiary. Asset and Spread are pulled along so the header row stays uniform -
 * leaving them at the old size would just move the mismatch two columns to the left.
 * The wider tracking adds ~100px across 33 columns, which the .table-scroll container
 * already absorbs (it scrolls horizontally by design at any width).
 */
#data-table thead th {
    color: var(--text-tertiary) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
}


/* The entire campaign card is the referral link. One click is enough; there is no
   intermediate disclosure row competing with the campaign data. */
#active-campaigns-grid a.campaign-card {
    color: inherit;
    text-decoration: none;
    cursor: pointer !important;
}

#active-campaigns-grid a.campaign-card:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: -1px;
}

/* Hallmark - component: header navigation, hairline tabs - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * States: default - hover - active - focus-visible - disabled
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop rail
 *
 * The previous segmented strip said "active" four times at once: a bounded container, a
 * hairline divider, a lifted surface fill, and an accent bar. It also nested a #0f0e0e box
 * inside the #0c0b0b header - two dark surfaces a hair apart in value, which only muddied
 * the header without separating anything.
 *
 * This layer strips it to one signal. The container and both fills are gone, so the tabs sit
 * directly on the header. Hairline dividers stay, now full cell height, reading as column
 * rules - the same motif the tables use. The accent bar moves from the top edge to the
 * bottom, where it attaches to the label instead of floating above it like a progress meter.
 */
.header-nav {
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.header-nav .nav-link {
    /* The strip's 1px top and bottom borders are gone, so the cell absorbs them and the rail
       keeps the 34px height it shares with the language trigger beside it. */
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    background: transparent !important;
}

.header-nav .nav-link + .nav-link::before,
.header-nav .nav-link::before {
    top: 0 !important;
    bottom: 0 !important;
}

/* The app's canonical label register: Archivo 0.72rem/700 at 0.12em uppercase, identical to
   the table and panel headers. The nav ran 0.74rem at 0.06em, a pairing used nowhere else. */
.header-nav .nav-icon {
    font-family: var(--font-sans) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.header-nav .nav-link::after {
    top: auto !important;
    bottom: 0 !important;
    height: 2px !important;
}

@media (hover: hover) {
    .header-nav .nav-link:hover:not(.disabled) {
        background: transparent !important;
    }

    .header-nav .nav-link:hover:not(.disabled) .nav-icon {
        color: var(--text-secondary) !important;
    }

    /* Grey, not accent: hover previews where the marker will land without claiming the cell
       is already selected. */
    .header-nav .nav-link:hover:not(.disabled)::after {
        background: var(--border-primary) !important;
        transform: scaleX(1) !important;
    }
}

.header-nav .nav-link.active {
    background: transparent !important;
}

.header-nav .nav-link.active .nav-icon,
.header-nav .nav-link.active:hover .nav-icon {
    color: var(--text-primary) !important;
}

.header-nav .nav-link.active::after,
.header-nav .nav-link.active:hover::after {
    background: var(--accent) !important;
    transform: scaleX(1) !important;
}

/* Focus ring hugs the cell. With no container to inset against, -4px would float the ring
   inside the label instead of tracing the hit area. */
.header-nav .nav-link:focus-visible {
    outline: 1px solid var(--accent) !important;
    outline-offset: -1px !important;
}

/* Hallmark - component: markets table first column gutter - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop
 *
 * Every column runs an 8px gutter, chosen when eleven columns had to fit the shell. With
 * RANK gone the table has 10 columns and no longer needs that squeeze, and 8px left the
 * exchange name almost touching the panel edge - the heaviest type in the table sitting
 * closest to the frame, which reads as an alignment error rather than a tight grid.
 *
 * Only the first column opens up. The interior gutters stay at 8px so the numeric columns
 * keep their measured rhythm; widening all ten would push the table back into horizontal
 * scroll. Verified: table width stays 1006px against a 1006px shell, zero overflow.
 */
#exchanges-dashboard-page #exchanges-metrics-table th:first-child,
#exchanges-dashboard-page #exchanges-metrics-table td:first-child {
    padding-left: 18px !important;
}

/* Hallmark - component: history modal table outer column rules - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop
 *
 * The column rules came from `border-right` on every cell, with the last cell zeroed out.
 * That draws the dividers *between* columns but never closes the run: the first column has
 * no rule on its left, the last none on its right. Both tables are full-bleed inside the
 * modal body, so those two columns bled into the modal frame while every interior column
 * sat in a closed cell - PAYMENT TIME open on the left, FUNDING PAYMENT open on the right.
 *
 * Restoring both outer rules closes the grid. The horizontal head and row rules already
 * span full width, so the verticals were the only edge left unterminated.
 */
:is(#history-table-modal, #single-ex-history-table-modal) thead th:first-child,
:is(#history-table-modal, #single-ex-history-table-modal) tbody > tr > td:first-child {
    border-left: 1px solid var(--border-subtle) !important;
}

:is(#history-table-modal, #single-ex-history-table-modal) thead th:last-child,
:is(#history-table-modal, #single-ex-history-table-modal) tbody > tr > td:last-child {
    border-right: 1px solid var(--border-subtle) !important;
}

/* Hallmark - component: history modal column rules and summary row - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop
 *
 * Two separate faults, one root cause.
 *
 * The column rules were `1px solid rgba(255,255,255,0.06)`, which the browser resolves to
 * 0.8px at this zoom and then paints at 6% alpha over #0c0b0b - roughly two levels of
 * luminance above the background, below the threshold where a hairline reads as a line at
 * all. The interior rules technically existed; they were simply invisible, which is why the
 * divider left of FUNDING PAYMENT looked absent. Raising them to 0.10 puts them at the same
 * weight as `--border-primary`, matching the rules the main tables already draw.
 *
 * The summary row set `border-top` on the <tr>. Both tables are `border-collapse: separate`,
 * where row borders are never painted - the browser reported 0px. Moving the rule onto the
 * cells is the only way to draw it under that collapse mode. It gets 2px accent-tinted
 * against the 1px neutral interior rules, so the total reads as a footer boundary rather
 * than one more data row, and the row fill lifts to #171514 to close the figure.
 */
:is(#history-table-modal, #single-ex-history-table-modal) thead th,
:is(#history-table-modal, #single-ex-history-table-modal) tbody > tr > td {
    border-right-color: rgba(255, 255, 255, 0.10) !important;
}

:is(#history-table-modal, #single-ex-history-table-modal) thead th:first-child,
:is(#history-table-modal, #single-ex-history-table-modal) tbody > tr > td:first-child {
    border-left-color: rgba(255, 255, 255, 0.10) !important;
}

/* The outer-rule layer above is a plain th/td selector, so the earlier `:last-child` rules
   outrank it on specificity and kept the closing rule at 0.06. Match their specificity. */
:is(#history-table-modal, #single-ex-history-table-modal) thead th:last-child,
:is(#history-table-modal, #single-ex-history-table-modal) tbody > tr > td:last-child {
    border-right-color: rgba(255, 255, 255, 0.10) !important;
}

/* Hallmark - component: history modal closing column rule - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop
 *
 * The closing rule was drawn all along; the reason it did not read is what sits beside it.
 *
 * The scroll container reserves a 10px scrollbar gutter, so the table's content box stops
 * 10px short of the modal frame. The rule landed in open space - dark gutter to its right,
 * frame 10px further out - reading as a stray hairline near the edge rather than the wall
 * closing the grid. The first column has no such gap (~1px to the frame), which is exactly
 * why only the right side looked unterminated.
 *
 * The gutter cannot be reclaimed: `overflow-y: overlay` is an alias of `auto` in Chrome and
 * still reserves, `scrollbar-gutter: stable` reserves by definition, and `scrollbar-width:
 * none` would remove the scrollbar itself from a 170-row table. So the rule stays inset and
 * has to carry its own weight instead: 0.14 alpha resolves to rgb(46,45,45) against this
 * background, just above the frame's own rgb(43,41,39). It now terminates the grid at the
 * same visual weight the frame does, which is what the eye was looking for.
 *
 * The track is painted to match, so the 10px strip reads as frame rather than as a lit gap
 * between the last column and the edge.
 */
:is(#history-table-modal, #single-ex-history-table-modal) thead th:last-child,
:is(#history-table-modal, #single-ex-history-table-modal) tbody > tr > td:last-child {
    border-right-color: rgba(255, 255, 255, 0.14) !important;
}

:is(#history-table-modal, #single-ex-history-table-modal) > .modal-body::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

/* Summary row: AVERAGE FUNDING / REALIZED SPREAD.
 *
 * Fill and text colour are deliberately absent. An earlier `tr:last-child:not(:only-child)`
 * layer already lifts this row to `--bg-tertiary` and outranks anything at this specificity
 * (two classes beat one), so re-declaring them here would either lose or need a specificity
 * arms race to restate a value the tokens already give correctly. Only the rules are set -
 * that is the part that was genuinely missing.
 *
 * Doubled ID prefix, because that last-child layer sits at (1,2,2) and a single-ID selector
 * cannot reach it. */
:is(#history-table-modal, #single-ex-history-table-modal)
:is(#history-table-body, #single-ex-history-table-body) > tr.history-summary-row > td {
    border-top: 2px solid rgba(236, 48, 19, 0.55) !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.14) !important;
    font-weight: 700 !important;
}

/* Hallmark - component: funding detail venue window - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Reference: strategy exchange names, with the interval kept in the mono data register
 * Critique: P5 H5 E5 S5 R5 V5 - hierarchy, density and responsive fit pass
 */
#single-ex-history-table-modal .history-detail-eyebrow {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-xs);
}

#single-ex-history-table-modal .history-funding-venue {
    min-width: 0;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

#single-ex-history-table-modal .history-funding-exchange {
    min-width: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#single-ex-history-table-modal .history-funding-exchange .ex-logo {
    vertical-align: -0.18em;
}

#single-ex-history-table-modal .history-funding-interval {
    display: inline-flex;
    align-items: center;
    gap: 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.035em;
    white-space: nowrap;
}

#single-ex-history-table-modal .history-funding-interval-label {
    display: none;
}

#single-ex-history-table-modal #single-ex-history-table-interval {
    color: inherit;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.035em;
}

@media (max-width: 640px) {
    #single-ex-history-table-modal .history-detail-eyebrow {
        width: 100%;
        align-items: flex-start;
    }

    #single-ex-history-table-modal .history-funding-venue {
        max-width: 100%;
    }
}

/* Hallmark - component: history modal header column rules - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop
 *
 * The header verticals were declared all along, at the same 0.10 alpha as the body's. They
 * are not the same line, though. In the body a divider runs the full column - 170 rows, some
 * ten thousand pixels of continuous edge - and the eye integrates it into a rule. In the head
 * the identical hairline is a 48px stub, and a 0.8px stub at +24 luminance over its own fill
 * falls under the threshold where it registers as a line at all. So the grid read as open
 * exactly where the column is named: no rule left of FUNDING PAYMENT, none right of PAYMENT
 * TIME, while the same divider two rows down was plainly there.
 *
 * Short runs need more contrast to carry the same weight, so the head gets 0.18 - rgb(58,57,57)
 * against the rgb(15,14,14) header fill, +43 where the body sits at +24. Measured against the
 * body rule it is the stronger value; seen against the body rule it is the same line, which is
 * the point. The step in alpha lands on the header's own bottom rule, where the fill already
 * changes, so it reads as the boundary between two registers rather than as a break in one.
 *
 * All three edges move together - interior, opening and closing - so the header row closes as
 * one grid instead of three weights.
 */
:is(#history-table-modal, #single-ex-history-table-modal) thead th {
    border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Specificity-matched to the `:first-child` / `:last-child` layers above, which sit at (1,1,2)
   and would otherwise outrank the plain `thead th` selector on the two outer edges. */
:is(#history-table-modal, #single-ex-history-table-modal) thead th:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.18) !important;
}

:is(#history-table-modal, #single-ex-history-table-modal) thead th:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Hallmark - component: history modal column rules, unified weight - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop
 *
 * Third pass on the same report, so this stops tuning individual edges and sets one weight for
 * every vertical in the grid.
 *
 * The grid had been carrying three alphas at once - 0.10 interior, 0.14 closing, 0.18 head -
 * which is why a divider could read on one boundary and vanish on the next: at 0.10 over
 * #0c0b0b a hairline lands at rgb(36,35,35), +24 luminance, and whether it registers depends
 * on how much of it runs uninterrupted. A full-column run integrates; a 48px header stub does
 * not. Chasing each complaint one edge at a time just moved the weakest edge around.
 *
 * Body verticals now all sit at 0.14 - rgb(46,45,45), the weight the closing rule already had -
 * so interior, opening and closing rules are one line rather than three. The head runs 0.20,
 * rgb(63,62,62): more contrast for less length, which is what makes the 48px stub read at the
 * same weight as the column below it rather than measure the same and disappear.
 *
 * Verticals now outweigh the 0.06 row rules, and that is the intended reading - the columns are
 * what the eye has to track across 170 rows, the rows only need separating.
 */
:is(#history-table-modal, #single-ex-history-table-modal) tbody > tr > td,
:is(#history-table-modal, #single-ex-history-table-modal) tbody > tr > td:first-child,
:is(#history-table-modal, #single-ex-history-table-modal) tbody > tr > td:last-child {
    border-right-color: rgba(255, 255, 255, 0.14) !important;
    border-left-color: rgba(255, 255, 255, 0.14) !important;
}

:is(#history-table-modal, #single-ex-history-table-modal) thead th,
:is(#history-table-modal, #single-ex-history-table-modal) thead th:first-child,
:is(#history-table-modal, #single-ex-history-table-modal) thead th:last-child {
    border-right-color: rgba(255, 255, 255, 0.20) !important;
    border-left-color: rgba(255, 255, 255, 0.20) !important;
}

/* Hallmark - component: history modal column rules, ownership flip - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop
 *
 * Raising alpha did not fix this because contrast was never the fault. Measuring the header
 * against the report shows the pattern: the last column's closing rule is solid, the first
 * boundary is faint, and the boundary left of FUNDING PAYMENT is gone - three different
 * results from one identical declaration. That is not a colour problem, it is a paint-order
 * problem.
 *
 * Every divider was a `border-right`, drawn just inside the *left* cell's box. The header cells
 * are `position: sticky` with an opaque fill, so each one is promoted to its own layer, and
 * Chrome snaps layer bounds to whole pixels. Column edges here land on fractions - 339.37 and
 * 580.54 - so each th's layer expands leftwards over the previous th's right border and repaints
 * it with background. How much survives depends purely on the fraction: the boundary at 580.54
 * keeps 0.46px, at 339.37 it keeps 0.63px, and the table's far right edge has no next cell to
 * cover it and keeps all 1px. Exactly the three weights in the screenshot.
 *
 * So the rule moves to the cell that paints last at each boundary: `border-left` on every cell,
 * inside its own layer, where nothing is painted after it. A cell cannot erase its own border.
 * The far right edge keeps a `border-right` because there is no cell after it to carry one.
 *
 * The body is flipped with the head even though its cells are not sticky and never lost a rule.
 * If only the head moved, its dividers would sit one pixel right of the body's and the grid
 * would step at the seam. Same owner everywhere, one continuous line top to bottom.
 */
:is(#history-table-modal, #single-ex-history-table-modal) thead th,
:is(#history-table-modal, #single-ex-history-table-modal) thead th:first-child,
:is(#history-table-modal, #single-ex-history-table-modal) thead th:last-child {
    border-left: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-right: 0 !important;
}

:is(#history-table-modal, #single-ex-history-table-modal) thead th:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.20) !important;
}

:is(#history-table-modal, #single-ex-history-table-modal) tbody > tr > td,
:is(#history-table-modal, #single-ex-history-table-modal) tbody > tr > td:first-child,
:is(#history-table-modal, #single-ex-history-table-modal) tbody > tr > td:last-child {
    border-left: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-right: 0 !important;
}

:is(#history-table-modal, #single-ex-history-table-modal) tbody > tr > td:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.14) !important;
}

/* Hallmark - component: header navigation - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * States: default - hover - active - focus-visible - disabled
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop rail
 *
 * Two things were wrong, and only one of them was style.
 *
 * Centring: the nav box was already dead centre - 798 against a viewport centre of 800 - but it
 * did not look it, because the three cells were 163 / 153 / 91 px wide. A viewer does not centre
 * a tab set on its bounding box, they centre it on the middle tab, and YIELD CALCULATOR sat 34px
 * right of true centre while MARKETS trailed off short. Equal cells fix what measuring could not
 * see: `flex: 1 1 0` over a fixed 528px rail puts the middle tab exactly on the axis and gives
 * the group a straight right edge instead of a ragged one.
 *
 * Style: the cell was 34px tall inside a 56px header, so the accent bar landed at y44 with 11px
 * of empty header under it - a red rule floating in the middle of the bar, attached to nothing.
 * The cells now run the full header height, which puts the bar directly on the header's own
 * bottom rule. That is the whole tab metaphor: the selected tab owns its segment of the line
 * that separates the chrome from the page.
 *
 * With the bar doing that job the vertical hairlines go. They were a table motif - column rules -
 * on something that is not a table, and between them and the underline the nav was marking
 * structure twice in two different idioms.
 *
 * Labels move off the table-header register they were borrowing: 0.72rem at 0.12em is correct for
 * a column head, where the text is a caption over data, but at that tracking a nav reads as fine
 * print. 0.76rem at 0.09em keeps the same uppercase Archivo voice and lets it sit up as
 * navigation. Inactive rises from tertiary to secondary for the same reason - at rgb(138) against
 * rgb(244) the two unselected tabs read as disabled rather than available. The accent bar is a
 * strong enough selection signal that the labels do not have to carry it too.
 */
.header-nav {
    /* 528 / 3 = 176 per cell against a ~133px longest label, so no cell is padding-starved and
       none wraps. Falls back to the column width below ~1080px. */
    width: min(100%, 528px) !important;
    height: 100% !important;
    gap: 0 !important;
    align-items: stretch !important;
}

.header-nav .nav-link {
    flex: 1 1 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
}

/* Column rules belong to tables. ::before is reclaimed as the hover frame in pass 3 below - do
   not re-add a display:none here, it outranks the frame's own rule. */
.header-nav .nav-link + .nav-link::before {
    background: transparent !important;
    width: auto !important;
}

.header-nav .nav-icon {
    font-size: 0.76rem !important;
    letter-spacing: 0.09em !important;
}

/* Full-height cell, so bottom:0 is the header's own rule rather than a line in mid-air. */
.header-nav .nav-link::after {
    top: auto !important;
    bottom: 0 !important;
    height: 2px !important;
}

.header-nav .nav-link .nav-icon {
    color: var(--text-secondary) !important;
}

@media (hover: hover) {
    .header-nav .nav-link:hover:not(.disabled) .nav-icon {
        color: var(--text-primary) !important;
    }
}

.header-nav .nav-link.active .nav-icon,
.header-nav .nav-link.active:hover .nav-icon {
    color: var(--text-primary) !important;
}

/* Hallmark - component: header navigation, pass 2 - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * States: default - hover - active - focus-visible
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop rail
 *
 * The face was already Archivo. What made it read as a foreign font was the register: uppercase
 * at 0.1em tracking in 700 is the site's column-head voice - the exact setting `th` uses - and a
 * column head is a caption printed over data, not something you click. Set the way buttons are
 * set elsewhere here (11.375px, 600, no tracking, sentence case) it stops announcing itself and
 * becomes the same material as the rest of the chrome.
 *
 * Sentence case also buys back the horizontal room that makes an outline viable: uppercase runs
 * ~15% wider, and a frame around FUNDING ARBITRAGE at the old width would have been a slab.
 *
 * Equal spacing: with the accent bar gone the cells are invisible, so what the eye measures is
 * the white between words, not between boxes. Equal-width cells gave equal box pitch but gaps of
 * 48 / 85px - visibly lopsided. Shrink-to-fit cells with one shared gap make every gap
 * gap + 2*padding, identical by construction, and justify-content: center keeps the group on the
 * screen axis.
 *
 * The hover frame replaces the underline as the pointer's feedback, so it has to hug the words -
 * a 28px cell, not the 55px header height, or the frame is a panel rather than a label. Drawn
 * with inset box-shadow rather than a border so nothing reflows on hover. Selection now rests on
 * colour alone (primary against secondary); the frame stays reserved for the pointer, since a
 * permanent frame on the active tab would make hovering it a no-op.
 */
.header-nav {
    width: auto !important;
    height: 100% !important;
    /* Gap + 2x12px padding = 32px between labels, identical at every seam. */
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
}

.header-nav .nav-link {
    flex: 0 0 auto !important;
    height: 28px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
    box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow 140ms ease, color 140ms ease !important;
}

/* The underline is gone; the frame is the new pointer feedback. */
.header-nav .nav-link::after {
    display: none !important;
}

.header-nav .nav-icon {
    font-family: var(--font-sans) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

@media (hover: hover) {
    .header-nav .nav-link:hover:not(.disabled) {
        /* One step above --border-primary (0.12): that value is tuned for rules that sit inside a
           panel, and this frame has to hold its own against bare header ground. */
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
    }

    .header-nav .nav-link:hover:not(.disabled) .nav-icon {
        color: var(--text-primary) !important;
    }
}

/* Hallmark - component: header navigation, pass 3 - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * States: default - hover - active - focus-visible - reduced-motion
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop rail
 *
 * Scale first. 11.375px was the site's generic button size, which is right for a control sitting
 * among twenty other controls and wrong for the three entries that partition the whole product.
 * 13.3px puts them a clear step above every button on the page while staying under the 14.7px
 * logo - the header now reads logo > tabs > controls instead of logo > everything-else.
 *
 * The hover frame that lived here is gone at the user's request. ::before goes back to being
 * nothing at all - the selector list below is inherited from the frame because three earlier
 * layers styled ::before as a column divider, and simply deleting these rules would let those
 * dividers back in. Keeping the list and setting content: none is what keeps ::before dead.
 *
 * Hover now rests entirely on the label: colour to primary plus the 2px rise from pass 4. That
 * costs the sequencing the frame used to provide, so the lift's 40ms delay comes off in the same
 * pass - with nothing to follow, a delayed start is just latency.
 */
.header-nav .nav-link {
    height: 32px !important;
    padding: 0 14px !important;
    box-shadow: none !important;
}

.header-nav .nav-icon {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
}

.header-nav .nav-link::before,
.header-nav .nav-link + .nav-link::before,
.header-nav .nav-link:first-child::before,
.header-nav .nav-link[hidden]:first-child + .nav-link::before,
.header-nav .nav-link:hover::before,
.header-nav .nav-link:focus-visible::before {
    content: none !important;
    display: none !important;
}

/* Hallmark - component: header navigation, pass 4 - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * States: default - hover - active(pressed) - reduced-motion
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop rail
 *
 * The label needs its own motion, but almost every obvious way to move type here is wrong. The
 * cells are shrink-to-fit, so letter-spacing or a weight change reflows the cell and shoves the
 * two neighbours sideways - the whole nav twitches every time the pointer crosses it. Scaling
 * type resamples the glyphs and the label goes soft for the length of the transition. What is
 * free is a transform that does not change size: a 2px rise, composited, no reflow, no blur.
 *
 * The direction is chosen against the frame, not with it. The frame comes in flattened and clamps
 * down onto the label; the label rises to meet it. Two motions closing on the same line read as
 * one event - something gripping the word - where two motions travelling the same way would just
 * read as the whole cell sliding.
 *
 * The 40ms delay is what makes it a sequence instead of a pile-up. The frame starts alone, and by
 * the time the eye has registered an edge appearing the label is already moving, so the frame
 * appears to cause the lift. Without the offset both start on the same frame and the composite
 * reads as generic hover wobble.
 *
 * Press cancels the lift instantly (60ms, no delay): the label drops back under the pointer, so
 * the click lands on something that yields. Release restores the hover state on its own timing.
 */
.header-nav .nav-icon {
    transform: translateY(0);
    transition: color 140ms ease-out, transform 130ms ease-out !important;
    will-change: transform;
}

@media (hover: hover) {
    .header-nav .nav-link:hover:not(.disabled) .nav-icon {
        transform: translateY(-2px);
        /* Same overshoot family as the frame's old curve, now starting immediately: with the
           frame removed there is nothing to sequence behind, so a delay is only latency. */
        transition: color 140ms ease-out,
                    transform 260ms cubic-bezier(0.22, 1.1, 0.36, 1) !important;
    }

    .header-nav .nav-link:active:not(.disabled) .nav-icon {
        transform: translateY(0);
        transition: transform 60ms ease-out !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-nav .nav-icon,
    .header-nav .nav-link:hover:not(.disabled) .nav-icon {
        transform: none;
        transition: color 100ms linear !important;
    }
}

/* Hallmark - component: markets toolbar search - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * States: default - hover - focus-within - filled - disabled - loading - error - success
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: desktop rail
 *
 * The toolbar is one line with two objects on it, and until now they agreed on nothing: the pill
 * group was 194x38, the field 280x44. Two mismatched rectangles at opposite ends of a rule read
 * as two unrelated widgets rather than the two halves of one filter row. Matching both axes makes
 * the row symmetrical, which is also what "the same size" means literally.
 *
 * The width comes from --ex-search-width, written by syncExchangeSearchWidth() off the pill
 * group's measured box. A constant would have been one line, but the pills are text-sized: the
 * moment a label is retranslated or the font metrics shift, a frozen 194px stops matching
 * anything. The 280px fallback keeps the field usable if the script never runs.
 *
 * Shrinking from 280 to ~194 costs 86px of typing room, and the field's right padding was 44px -
 * reserved for the state glyph (loading spinner, success tick) that sits 16px from the end. At
 * the new width that reservation is a quarter of the box. It drops to 34px, which still clears
 * the 16px glyph plus its own 16px inset, and the resting label ("Search exchange", 76px) fits
 * the remaining run with room to spare.
 */
#exchanges-dashboard-page .exchange-search-field {
    width: var(--ex-search-width, 280px);
    height: 38px;
    min-height: 38px;
    padding-right: 34px;
}

#exchanges-dashboard-page .exchange-search-demo {
    inset-inline: 44px 30px;
}

/* Hallmark - component: market card delta badge - genre: modern-minimal
 * Theme: existing FomoHub technical ledger
 * States: up - down - flat - absent
 * Critique: P5 H5 E5 S5 R5 V5 - contrast: pass - scope: markets summary cards
 *
 * The badge sits opposite the eyebrow, on the label's line rather than the value's. That is the
 * hierarchy the card already has: the eyebrow says what is being measured, the 34px value is the
 * answer, and the delta is a qualifier on the question, not a second answer. Putting it up top
 * also means it never competes with the sparkline for the card's lower half.
 *
 * Mono, because it is a number the eye scans against the number above it - tabular figures keep
 * the decimal in a fixed column so 1.5% and 11.4% do not shuffle the sign leftward.
 *
 * Colour carries direction, and the sign carries it again: +1.5% is legible without colour, so
 * the delta survives greyscale and the ~8% of men who would read the green and the red as the
 * same brown. No chip, no tint: the exchanges table prints its deltas as bare text next to the
 * value, and these cards answer the same question, so they use the same treatment.
 *
 * Flat is neutral grey with no sign. A signed zero implies a direction the rounding erased.
 */
#exchanges-dashboard-page .ex-card-change {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    /* Same setting as the deltas inside the exchanges table. Note this is 0.72rem/550, not the
     * 0.8rem/600 written inline in app.js renderExchangesTable - that inline pair is overridden
     * by the markets typography layer (`#exchanges-metrics-tbody td span[style*="font-size:
     * 0.8rem"]`), so 0.72rem/550 is what actually renders there. !important is required here
     * too: an earlier layer at style.css:9524 pins this font-size with !important. */
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    font-weight: 550 !important;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: 'lnum' 1, 'tnum' 1;
}

#exchanges-dashboard-page .ex-card-change.is-up {
    color: #57c08f;
}

#exchanges-dashboard-page .ex-card-change.is-down {
    color: #e0674f;
}

#exchanges-dashboard-page .ex-card-change.is-flat {
    color: var(--text-tertiary);
}

/* ============================================================================
 * MODAL "EXCHANGE STATS & FUNDING AVERAGES" TABLE - MARKETS TYPOGRAPHIC REGISTER
 * ============================================================================
 * The modal table was running its own scale (headers 0.54rem/0.07em, cells
 * 0.66rem/540, exchange name 0.69rem/650) - a third register on a site that
 * already settled on one for tabular data in the markets table. Same content
 * type, same reading task, so it takes the same setting as
 * #exchanges-metrics-table (style.css:15400): headers Archivo 0.72rem/700 at
 * 0.12em uppercase in text-tertiary, cells JetBrains Mono 0.72rem/550 at
 * -0.025em, exchange name Archivo 1rem/800.
 *
 * The two-tier numeric scale of the markets table (0.86rem for the headline
 * column) is deliberately NOT copied: there the headline is Open Interest, here
 * it is Funding (Now), and that column already carries weight 700 inline. A
 * second size would rank the columns wrongly.
 *
 * Headers get nowrap, and the table drops to auto layout. At 0.72rem/0.12em the
 * longest labels ("OPEN INTEREST", "FUNDING (NOW)") need ~130px, and the old
 * fixed layout hands every one of the nine columns the same width - so fitting
 * the longest ones meant a ~1200px table scrolling inside a 922px modal. Auto
 * layout gives each column what its own content needs, which comes to ~920px:
 * it fits, where the previous fixed 1020px min-width scrolled horizontally even
 * at the smaller type. Cell padding is 9px rather than 12 to buy the ~30px that
 * closes that gap; the columns are nowrap, so if a future token carries wider
 * figures the container's overflow:auto still handles it.
 */
#detail-modal .modal-table-container table {
    min-width: 0;
    table-layout: auto;
}

#detail-modal .modal-table-container thead th {
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    /* 8px, not the 9 this layer originally carried: the exchange logo added ~21px to the first
       column and pushed the auto-laid table 6px past the 950px container. 1px off each side of
       nine columns buys back 18px, which clears it without touching the type. */
    padding: 0 8px !important;
    text-align: center !important;
}

#detail-modal .sort-icon {
    font-size: 0.6rem;
}

#detail-modal #modal-exchanges-tbody td {
    font-family: var(--font-mono) !important;
    font-size: 0.72rem;
    font-weight: 550;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    padding: 0 8px !important;
    text-align: center !important;
    vertical-align: middle;
    white-space: nowrap;
}

/* The name cell keeps the mono base like the markets table's first column; the
   exchange label itself is the sans display element sitting inside it. */
#detail-modal #modal-exchanges-tbody td:first-child {
    font-family: var(--font-mono) !important;
    font-size: 0.72rem;
    font-weight: 550 !important;
    text-align: center !important;
}

#detail-modal #modal-exchanges-tbody td:first-child .modal-ex-link {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

/* ============================================================================
 * EXCHANGE LOGOS
 * ----------------------------------------------------------------------------
 * One rule for every place an exchange name is printed. The markup comes from
 * exchangeLogoHtml() in app.js, and the artwork registry is EXCHANGE_LOGOS in
 * data.js — an exchange with no entry emits no <img> at all, so these rules are
 * simply inert until a logo file is dropped in.
 *
 * Sizing is in `em`, not px, on purpose: the same mark renders beside type that
 * ranges from ~10px (matrix headers, modal table) to ~20px (strategy cards). One
 * em-based rule tracks the local font-size everywhere instead of needing a size
 * variant per call site. 1.15em keeps the mark just above the x-height so it
 * reads as part of the label rather than as a separate icon column.
 *
 * vertical-align sits slightly below the baseline so the optical centre of the
 * square lines up with the middle of the text; in the call sites whose parent is
 * a flex row (.ex-platform-brand, .exm-name) vertical-align is ignored and the
 * parent's align-items:center does the same job.
 * ============================================================================ */

.ex-logo {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    margin-right: 0.38em;
    vertical-align: -0.2em;
    object-fit: contain;
    border-radius: 0;
    /* Column headers in the matrix are uppercase with wide tracking; the logo must
       not inherit that spacing as trailing whitespace. */
    letter-spacing: normal;
}

/* Markets platform cards: the logo stands in for the 32px coloured initial
   square, so it takes that square's exact box instead of an em multiple. */
.ex-logo--card {
    width: 32px;
    height: 32px;
    margin-right: 0;
    vertical-align: middle;
}

/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * component: strategy side identity · genre: modern-minimal · theme: FomoHub technical ledger
 * reference: backtest exchange selectors · state: static · contrast: pass
 */
#strategy-overlay .strategy-ex-identity {
    min-width: 0;
    min-height: 20px;
    padding-right: 28px;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

#strategy-overlay .strategy-ex-identity .strategy-ex-badge {
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

#strategy-overlay .strategy-ex-identity .strategy-ex-name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -0.015em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#strategy-overlay .strategy-ex-identity .ex-logo {
    vertical-align: -0.18em;
}

/* Mobile header remains one navigable rail instead of compressing four regions into each other. */
@media (max-width: 640px) {
    .header-container {
        justify-content: flex-start;
        gap: 8px;
        padding-inline: 12px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .header-container::-webkit-scrollbar {
        display: none;
    }

    .header-left,
    .header-center,
    .header-right {
        flex: 0 0 auto;
    }

    .header-nav {
        gap: 0 !important;
    }

    .header-nav .nav-link {
        padding-inline: 8px !important;
    }

    .header-nav .nav-icon {
        font-size: 0.72rem !important;
    }

    .language-trigger {
        min-width: max-content;
    }
}

/* Language trigger: roomier control with the label and chevron centred as one unit. */
#lang-switcher {
    width: 124px !important;
}

.language-trigger {
    width: 124px !important;
    min-width: 124px !important;
    height: 44px !important;
    padding-inline: 16px !important;
    gap: 8px !important;
    font-size: 0.76rem !important;
}

.language-trigger svg {
    width: 15px !important;
    height: 15px !important;
}

#lang-switcher .lang-dropdown {
    min-width: 124px !important;
    width: 124px !important;
}

/* Hallmark · macrostructure: Workbench · theme: Coral · enrichment: none
 * pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass · honest: pass · responsive: pass
 */
#yield-calculator-page {
    min-width: 0;
    overflow-x: clip;
    background: var(--color-yield-paper);
    color: var(--color-yield-ink);
    font-family: var(--font-yield-body);
}

#yield-calculator-page .yield-shell {
    width: 100%;
    max-width: var(--width-yield-shell);
    min-width: 0;
    margin-inline: auto;
    padding: var(--space-yield-10) clamp(var(--space-yield-4), 4vw, var(--space-yield-16)) var(--space-yield-16);
}

#yield-calculator-page .yield-page-header {
    display: block;
    max-width: 760px;
    min-height: 0;
    margin: 0 0 var(--space-yield-5);
    padding: 0;
    border: 0;
    text-align: start;
}

#yield-calculator-page .yield-page-header h1 {
    min-width: 0;
    margin: 0;
    color: var(--color-yield-ink);
    font-family: var(--font-yield-display);
    font-size: clamp(2.25rem, 6vw, 3.6rem);
    font-style: normal;
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.045em;
    overflow-wrap: anywhere;
}

#yield-calculator-page .yield-page-header p {
    max-width: none;
    margin: var(--space-yield-3) 0 0;
    color: var(--color-yield-muted);
    font-family: var(--font-yield-body);
    font-size: clamp(0.92rem, 2.5vw, 1.08rem);
    line-height: 1.5;
}

#yield-calculator-page .yield-protocol-section {
    min-width: 0;
    margin-block-end: var(--space-yield-6);
}

#yield-calculator-page .yield-protocol-section h2,
#yield-calculator-page .yield-panel-heading h2 {
    margin: 0;
    color: var(--color-yield-ink);
    font-family: var(--font-yield-display);
    font-size: var(--text-yield-lg);
    font-weight: 750;
    letter-spacing: -0.02em;
}

#yield-calculator-page .yield-protocol-list {
    display: flex;
    min-width: 0;
    gap: var(--space-yield-2);
    margin-block-start: 0;
    padding-block-end: var(--space-yield-2);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
}

#yield-calculator-page .yield-protocol-list::-webkit-scrollbar {
    display: none;
}

#yield-calculator-page .yield-protocol-button {
    min-width: max-content;
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-yield-3);
    padding-inline: var(--space-yield-4);
    border: var(--rule-yield) solid var(--color-yield-rule);
    border-radius: var(--radius-yield);
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: var(--color-yield-surface);
    color: var(--color-yield-muted);
    font-family: var(--font-yield-display);
    font-size: var(--text-yield-md);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-yield-short) var(--ease-yield-out), color var(--dur-yield-short) var(--ease-yield-out), border-color var(--dur-yield-short) var(--ease-yield-out), transform var(--dur-yield-instant) var(--ease-yield-out);
}

#yield-calculator-page .yield-protocol-button .ex-logo {
    width: 28px;
    height: 28px;
    margin: 0;
    object-fit: contain;
}

#yield-calculator-page .yield-protocol-button.is-active {
    border-color: var(--color-yield-accent);
    background: var(--color-yield-accent-quiet);
    color: var(--color-yield-ink);
}

#yield-calculator-page .yield-protocol-button:active,
#yield-calculator-page .yield-mode-tab:active,
#yield-calculator-page .yield-allocation-presets button:active,
#yield-calculator-page .yield-unit-switch button:active,
#yield-calculator-page .yield-open-protocol:active,
#yield-calculator-page .yield-input-summary button:active {
    transform: translateY(1px);
}

#yield-calculator-page .yield-protocol-button:focus-visible,
#yield-calculator-page .yield-mode-tab:focus-visible,
#yield-calculator-page .yield-allocation-presets button:focus-visible,
#yield-calculator-page .yield-unit-switch button:focus-visible,
#yield-calculator-page .yield-open-protocol:focus-visible,
#yield-calculator-page .yield-input-summary button:focus-visible {
    outline: 2px solid var(--color-yield-focus);
    outline-offset: 2px;
}

#yield-calculator-page .yield-protocol-button:disabled,
#yield-calculator-page .yield-protocol-button[aria-disabled="true"],
#yield-calculator-page .yield-mode-tab:disabled,
#yield-calculator-page .yield-allocation-presets button:disabled,
#yield-calculator-page .yield-unit-switch button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#yield-calculator-page .yield-open-protocol[aria-disabled="true"],
#yield-calculator-page .yield-input-summary button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#yield-calculator-page .yield-protocol-button[data-state="loading"]::after {
    width: 12px;
    height: 12px;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-block-start-color: var(--color-yield-accent);
    border-radius: 50%;
    content: "";
    animation: yield-control-spin 800ms linear infinite;
}

#yield-calculator-page .yield-protocol-button[data-state="error"] {
    border-color: var(--color-yield-error);
}

#yield-calculator-page .yield-protocol-button[data-state="success"]::after {
    color: var(--color-yield-positive);
    content: "✓";
}

#yield-calculator-page .yield-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

#yield-calculator-page .yield-exchange-context {
    min-height: 1.4em;
    margin-block-start: var(--space-yield-2);
    color: var(--color-yield-faint);
    font-family: var(--font-yield-data);
    font-size: var(--text-yield-xs);
    line-height: 1.4;
}

#yield-calculator-page .yield-mode-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    justify-content: start;
    gap: var(--space-yield-5);
    min-width: 0;
    border-block-end: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-mode-tab {
    position: relative;
    min-width: 0;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-yield-2);
    padding: 0 0 var(--space-yield-1);
    border: 0;
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: transparent;
    color: var(--color-yield-muted);
    font-family: var(--font-yield-display);
    font-size: var(--text-yield-md);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-yield-short) var(--ease-yield-out), transform var(--dur-yield-instant) var(--ease-yield-out);
}

#yield-calculator-page .yield-mode-tab::after {
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    height: 2px;
    background: var(--color-yield-accent);
    content: "";
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-yield-medium) var(--ease-yield-out);
}

#yield-calculator-page .yield-mode-tab svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#yield-calculator-page .yield-mode-tab.is-active {
    color: var(--color-yield-ink);
}

#yield-calculator-page .yield-mode-tab.is-active::after {
    transform: scaleX(1);
}

#yield-calculator-page .yield-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
    margin-block-start: var(--space-yield-8);
    border-block: var(--rule-yield) solid var(--color-yield-rule);
    background: var(--color-yield-paper);
}

#yield-calculator-page .yield-input-panel,
#yield-calculator-page .yield-output-panel {
    min-width: 0;
    padding: var(--space-yield-6) 0;
    border: 0;
    background: var(--color-yield-paper);
    color: var(--color-yield-ink);
}

#yield-calculator-page .yield-input-panel {
    display: flex;
    flex-direction: column;
}

#yield-calculator-page .yield-output-panel {
    border-block-start: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-mode-pane[hidden],
#yield-calculator-page .yield-output-pane[hidden] {
    display: none !important;
}

#yield-calculator-page .yield-mode-pane.is-active,
#yield-calculator-page .yield-output-pane.is-active {
    animation: yield-pane-in var(--dur-yield-medium) var(--ease-yield-out) both;
}

#yield-calculator-page .yield-panel-heading {
    display: block;
    margin: 0 0 var(--space-yield-8);
    padding: 0;
    border: 0;
}

#yield-calculator-page .yield-panel-heading p {
    margin: var(--space-yield-2) 0 0;
    color: var(--color-yield-muted);
    font-family: var(--font-yield-body);
    font-size: var(--text-yield-md);
    line-height: 1.45;
}

#yield-calculator-page .yield-field {
    min-width: 0;
    margin-block-end: var(--space-yield-5);
}

#yield-calculator-page .yield-field label {
    display: block;
    margin-block-end: var(--space-yield-2);
    color: var(--color-yield-ink);
    font-family: var(--font-yield-display);
    font-size: var(--text-yield-sm);
    font-weight: 700;
    line-height: 1.35;
}

#yield-calculator-page .yield-field label span {
    color: var(--color-yield-faint);
    font-size: var(--text-yield-xs);
    font-weight: 500;
}

#yield-calculator-page .yield-field-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-width: 0;
}

#yield-calculator-page .yield-compound-input {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-yield-2);
    min-width: 0;
}

#yield-calculator-page .yield-input-wrap {
    width: 100%;
    min-width: 0;
    min-height: var(--height-yield-control);
    display: flex;
    align-items: center;
    gap: var(--space-yield-3);
    padding-inline: var(--space-yield-4);
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: var(--radius-yield);
    outline: 2px solid transparent;
    outline-offset: 1px;
    background: var(--color-yield-surface);
    color: var(--color-yield-muted);
    transition: background-color var(--dur-yield-short) var(--ease-yield-out), border-color var(--dur-yield-short) var(--ease-yield-out);
}

#yield-calculator-page .yield-input-wrap:focus-within {
    border-color: var(--color-yield-rule-strong);
    outline-color: var(--color-yield-focus);
}

#yield-calculator-page .yield-input-wrap:has(input[aria-invalid="true"]) {
    border-color: var(--color-yield-error);
}

#yield-calculator-page .yield-input-wrap:has(input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

#yield-calculator-page .yield-input-wrap input {
    width: 100%;
    min-width: 0;
    height: calc(var(--height-yield-control) - 2px);
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-yield-ink);
    font-family: var(--font-yield-data);
    font-size: 1.08rem;
    font-weight: 650;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Keep calculator number fields editable while removing the browser's
   increment/decrement controls from their right edge. */
#yield-calculator-page input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

#yield-calculator-page input[type="number"]::-webkit-inner-spin-button,
#yield-calculator-page input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

#yield-calculator-page .yield-input-wrap input::placeholder {
    color: var(--color-yield-faint);
    opacity: 1;
}

#yield-calculator-page .yield-input-wrap span {
    color: var(--color-yield-muted);
    font-family: var(--font-yield-data);
    font-size: var(--text-yield-sm);
    font-weight: 650;
    white-space: nowrap;
}

#yield-calculator-page .yield-field-help {
    min-height: 1lh;
    margin: var(--space-yield-2) 0 0;
    color: var(--color-yield-faint);
    font-family: var(--font-yield-body);
    font-size: var(--text-yield-xs);
    line-height: 1.45;
}

#yield-calculator-page .yield-unit-switch {
    display: grid;
    grid-template-columns: repeat(2, 58px);
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    background: var(--color-yield-surface);
}

#yield-calculator-page .yield-unit-switch button,
#yield-calculator-page .yield-allocation-presets button {
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-yield);
    outline: 2px solid transparent;
    outline-offset: -2px;
    background: transparent;
    color: var(--color-yield-muted);
    font-family: var(--font-yield-data);
    font-size: var(--text-yield-sm);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-yield-short) var(--ease-yield-out), color var(--dur-yield-short) var(--ease-yield-out), transform var(--dur-yield-instant) var(--ease-yield-out);
}

#yield-calculator-page .yield-unit-switch button {
    min-height: calc(var(--height-yield-control) - 2px);
}

#yield-calculator-page .yield-unit-switch button.is-active,
#yield-calculator-page .yield-allocation-presets button.is-active {
    background: var(--color-yield-ink);
    color: var(--color-yield-paper);
}

#yield-calculator-page .yield-allocation-presets {
    display: grid;
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    gap: var(--space-yield-2);
    margin-block-start: calc(var(--space-yield-2) * -1);
}

#yield-calculator-page .yield-allocation-presets button {
    border: var(--rule-yield) solid var(--color-yield-rule);
    background: var(--color-yield-surface);
}

#yield-calculator-page .yield-input-summary {
    padding-block: var(--space-yield-5);
    border-block: var(--rule-yield) solid var(--color-yield-rule);
    color: var(--color-yield-muted);
    font-size: var(--text-yield-md);
    line-height: 1.6;
}

#yield-calculator-page .yield-input-summary button {
    min-height: 44px;
    padding: 0;
    border: 0;
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: transparent;
    color: var(--color-yield-accent-hover);
    font: inherit;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

#yield-calculator-page .yield-form-actions {
    margin-block-start: auto;
    padding-block-start: var(--space-yield-8);
}

#yield-calculator-page .yield-open-protocol {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-yield-2);
    padding-inline: var(--space-yield-4);
    border: var(--rule-yield) solid var(--color-yield-accent);
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: transparent;
    color: var(--color-yield-accent-hover);
    font-family: var(--font-yield-display);
    font-size: var(--text-yield-sm);
    font-weight: 750;
    white-space: nowrap;
    transition: background-color var(--dur-yield-short) var(--ease-yield-out), color var(--dur-yield-short) var(--ease-yield-out), transform var(--dur-yield-instant) var(--ease-yield-out);
}

#yield-calculator-page .yield-open-protocol .ex-logo {
    width: 18px;
    height: 18px;
    margin: 0;
    flex: 0 0 18px;
    object-fit: contain;
}

#yield-calculator-page .yield-result-label {
    display: block;
    color: var(--color-yield-accent-hover);
    font-family: var(--font-yield-display);
    font-size: var(--text-yield-md);
    font-weight: 750;
}

#yield-calculator-page .yield-result-hero {
    display: block;
    min-width: 0;
    margin-block-start: var(--space-yield-3);
    color: var(--color-yield-ink);
    font-family: var(--font-yield-display);
    font-size: clamp(3rem, 10vw, 5.5rem);
    font-weight: 750;
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

#yield-calculator-page .yield-result-context {
    margin: var(--space-yield-3) 0 var(--space-yield-8);
    color: var(--color-yield-muted);
    font-size: var(--text-yield-md);
    line-height: 1.5;
}

#yield-calculator-page .yield-primary-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-end: var(--space-yield-8);
    border-block: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-primary-results > div {
    min-width: 0;
    padding: var(--space-yield-5) 0;
}

#yield-calculator-page .yield-primary-results > div + div {
    padding-inline-start: var(--space-yield-5);
    border-inline-start: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-primary-results span,
#yield-calculator-page .yield-result-ledger span {
    display: block;
    color: var(--color-yield-muted);
    font-size: var(--text-yield-md);
    line-height: 1.35;
}

#yield-calculator-page .yield-primary-results strong {
    display: block;
    margin-block-start: var(--space-yield-2);
    color: var(--color-yield-ink);
    font-family: var(--font-yield-data);
    font-size: clamp(1.45rem, 5vw, 2rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

#yield-calculator-page .yield-result-ledger {
    display: block;
    border: 0;
}

#yield-calculator-page .yield-result-ledger h3,
#yield-calculator-page .yield-scenarios h3 {
    margin: 0 0 var(--space-yield-4);
    color: var(--color-yield-ink);
    font-family: var(--font-yield-display);
    font-size: var(--text-yield-lg);
    font-weight: 750;
    letter-spacing: -0.02em;
}

#yield-calculator-page .yield-result-ledger > div {
    min-width: 0;
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto);
    align-items: center;
    gap: var(--space-yield-4);
    padding-block: var(--space-yield-3);
    border-block-end: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-result-ledger strong {
    color: var(--color-yield-ink);
    font-family: var(--font-yield-data);
    font-size: var(--text-yield-md);
    font-weight: 700;
    text-align: end;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

#yield-calculator-page [data-tone="positive"] {
    color: var(--color-yield-positive);
}

#yield-calculator-page [data-tone="negative"] {
    color: var(--color-yield-negative);
}

#yield-calculator-page .yield-net-result[data-tone="positive"] .yield-result-hero,
#yield-calculator-page .yield-net-result[data-tone="positive"] .yield-result-label {
    color: var(--color-yield-positive);
}

#yield-calculator-page .yield-net-result[data-tone="negative"] .yield-result-hero,
#yield-calculator-page .yield-net-result[data-tone="negative"] .yield-result-label {
    color: var(--color-yield-negative);
}

#yield-calculator-page .yield-scenarios {
    margin-block-start: var(--space-yield-8);
    padding-block-start: var(--space-yield-6);
    border-block-start: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-scenarios .yield-panel-heading {
    margin-block-end: var(--space-yield-4);
}

#yield-calculator-page .yield-scenarios .yield-panel-heading p {
    font-family: var(--font-yield-data);
    font-size: var(--text-yield-xs);
}

#yield-calculator-page .yield-scenarios table {
    width: 100%;
    border-collapse: collapse;
    color: var(--color-yield-ink-soft);
    font-family: var(--font-yield-data);
    font-size: var(--text-yield-xs);
    font-variant-numeric: tabular-nums;
}

#yield-calculator-page .yield-scenarios th,
#yield-calculator-page .yield-scenarios td {
    padding: var(--space-yield-3) var(--space-yield-2);
    border-block-end: var(--rule-yield) solid var(--color-yield-rule);
    text-align: end;
    white-space: nowrap;
}

#yield-calculator-page .yield-scenarios th:first-child,
#yield-calculator-page .yield-scenarios td:first-child {
    padding-inline-start: 0;
    text-align: start;
}

#yield-calculator-page .yield-disclaimer {
    margin: var(--space-yield-8) 0 0;
    color: var(--color-yield-faint);
    font-size: var(--text-yield-xs);
    line-height: 1.6;
}

@media (hover: hover) and (pointer: fine) {
    #yield-calculator-page .yield-protocol-button:hover,
    #yield-calculator-page .yield-allocation-presets button:hover,
    #yield-calculator-page .yield-unit-switch button:hover {
        background: var(--color-yield-surface-hover);
        color: var(--color-yield-ink);
    }

    #yield-calculator-page .yield-protocol-button.is-active:hover {
        border-color: var(--color-yield-accent-hover);
        background: var(--color-yield-accent-quiet);
    }

    #yield-calculator-page .yield-mode-tab:hover {
        color: var(--color-yield-ink);
    }

    #yield-calculator-page .yield-input-wrap:hover {
        background: var(--color-yield-surface-hover);
    }

    #yield-calculator-page .yield-open-protocol:hover {
        background: var(--color-yield-accent);
        color: var(--color-yield-accent-ink);
    }
}

@media (min-width: 40rem) {
    #yield-calculator-page .yield-field-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-yield-4);
    }

    #yield-calculator-page .yield-input-panel,
    #yield-calculator-page .yield-output-panel {
        padding: var(--space-yield-8);
    }
}

@media (min-width: 60rem) {
    #yield-calculator-page .yield-workbench {
        grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    }

    #yield-calculator-page .yield-input-panel {
        padding-inline-start: 0;
        padding-inline-end: var(--space-yield-10);
        border-inline-end: var(--rule-yield) solid var(--color-yield-rule);
    }

    #yield-calculator-page .yield-output-panel {
        padding-inline-start: var(--space-yield-10);
        padding-inline-end: 0;
        border-block-start: 0;
    }
}

@media (max-width: 39.99rem) {
    #yield-calculator-page .yield-mode-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    #yield-calculator-page .yield-mode-tab {
        gap: var(--space-yield-1);
        padding-inline: var(--space-yield-1);
        font-size: 0.68rem;
    }

    #yield-calculator-page .yield-mode-tab svg {
        width: 14px;
        height: 14px;
    }

    #yield-calculator-page .yield-allocation-presets {
        grid-template-columns: repeat(5, minmax(44px, 1fr));
        gap: var(--space-yield-1);
    }

    #yield-calculator-page .yield-scenarios {
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }
}

@media (pointer: coarse) {
    #yield-calculator-page .yield-protocol-button,
    #yield-calculator-page .yield-mode-tab,
    #yield-calculator-page .yield-allocation-presets button,
    #yield-calculator-page .yield-unit-switch button,
    #yield-calculator-page .yield-open-protocol,
    #yield-calculator-page .yield-input-summary button {
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #yield-calculator-page *,
    #yield-calculator-page *::before,
    #yield-calculator-page *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@keyframes yield-pane-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Funding detail exchange referral action. */
#single-ex-history-table-modal a.history-funding-exchange {
    outline: 2px solid transparent;
    outline-offset: -2px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms cubic-bezier(0.16, 1, 0.3, 1), transform 100ms cubic-bezier(0.16, 1, 0.3, 1);
}

#single-ex-history-table-modal a.history-funding-exchange:focus-visible {
    outline-color: var(--accent-hover);
}

#single-ex-history-table-modal a.history-funding-exchange:active {
    transform: translateY(1px);
}

#single-ex-history-table-modal a.history-funding-exchange[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
    #single-ex-history-table-modal a.history-funding-exchange:not([aria-disabled="true"]):hover {
        background: var(--bg-hover);
        color: var(--accent-hover);
    }
}

/* Hallmark · component: share dialog · genre: modern-minimal · theme: existing FomoHub Coral
 * states: default · hover · focus · active · disabled · loading · error · success
 * pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass · responsive: pass
 */
#yield-calculator-page .yield-form-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-yield-3);
}

#yield-calculator-page .yield-share-trigger {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-yield-2);
    padding-inline: var(--space-yield-4);
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: var(--radius-yield);
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: var(--color-yield-ink);
    color: var(--color-yield-paper);
    font-family: var(--font-yield-display);
    font-size: var(--text-yield-sm);
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-yield-short) var(--ease-yield-out), color var(--dur-yield-short) var(--ease-yield-out), transform var(--dur-yield-instant) var(--ease-yield-out);
}

#yield-calculator-page .yield-share-trigger svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#yield-calculator-page .yield-share-trigger:focus-visible {
    outline-color: var(--color-yield-focus);
}

#yield-calculator-page .yield-share-trigger:active {
    transform: translateY(1px);
}

#yield-calculator-page .yield-share-trigger:disabled,
#yield-calculator-page .yield-share-trigger[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

#yield-calculator-page .yield-share-trigger[data-state="loading"]::before,
.yield-share-dialog :is(.yield-share-action, #yield-share-copy-link, .yield-share-close)[data-state="loading"]::before {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-block-start-color: currentColor;
    border-radius: 50%;
    content: "";
    animation: yield-share-spin 800ms linear infinite;
}

#yield-calculator-page .yield-share-trigger[data-state="loading"] svg,
.yield-share-dialog :is(.yield-share-action, #yield-share-copy-link, .yield-share-close)[data-state="loading"] svg {
    display: none;
}

#yield-calculator-page .yield-share-trigger[data-state="error"],
.yield-share-dialog :is(.yield-share-action, #yield-share-copy-link, .yield-share-close)[data-state="error"] {
    border-color: var(--color-yield-error);
    color: var(--color-yield-error);
}

#yield-calculator-page .yield-share-trigger[data-state="success"],
.yield-share-dialog :is(.yield-share-action, #yield-share-copy-link, .yield-share-close)[data-state="success"] {
    border-color: var(--color-yield-positive);
    color: var(--color-yield-positive);
}

.yield-share-dialog {
    position: fixed;
    inset: 0;
    width: min(calc(100% - (var(--space-yield-2) * 2)), 620px);
    max-width: none;
    max-height: min(92dvh, 900px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: var(--radius-yield-share-lg);
    outline: 0;
    background: var(--color-yield-surface);
    color: var(--color-yield-ink);
    font-family: var(--font-yield-body);
}

.yield-share-dialog[open] {
    animation: yield-share-dialog-in var(--dur-yield-medium) var(--ease-yield-out) both;
}

.yield-share-dialog::backdrop {
    background: var(--color-yield-backdrop);
    animation: yield-share-backdrop-in var(--dur-yield-medium) var(--ease-yield-out) both;
}

.yield-share-modal {
    min-width: 0;
    max-height: min(92dvh, 900px);
    display: flex;
    flex-direction: column;
    background: var(--color-yield-surface);
    color: var(--color-yield-ink);
}

.yield-share-header {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-yield-4);
    padding: var(--space-yield-4) var(--space-yield-5);
    border-block-end: var(--rule-yield) solid var(--color-yield-rule);
}

.yield-share-header h2 {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-yield-3);
    margin: 0;
    color: var(--color-yield-ink);
    font-family: var(--font-yield-display);
    font-size: clamp(1.15rem, 4vw, 1.55rem);
    font-style: normal;
    font-weight: 760;
    line-height: 1.1;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
}

.yield-share-header h2 svg {
    width: 23px;
    height: 23px;
    flex: 0 0 auto;
    stroke: var(--color-yield-accent-hover);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yield-share-close {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: var(--rule-yield) solid transparent;
    border-radius: var(--radius-yield-share-sm);
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: transparent;
    color: var(--color-yield-muted);
    cursor: pointer;
    transition: background-color var(--dur-yield-short) var(--ease-yield-out), color var(--dur-yield-short) var(--ease-yield-out), transform var(--dur-yield-instant) var(--ease-yield-out);
}

.yield-share-close svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.yield-share-close:focus-visible,
.yield-share-action:focus-visible,
#yield-share-copy-link:focus-visible,
#yield-share-link:focus-visible {
    outline: 2px solid var(--color-yield-focus);
    outline-offset: 2px;
}

.yield-share-close:active,
.yield-share-action:active,
#yield-share-copy-link:active {
    transform: translateY(1px);
}

.yield-share-close:disabled,
.yield-share-action:disabled,
.yield-share-action[aria-disabled="true"],
#yield-share-copy-link:disabled,
#yield-share-copy-link[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.yield-share-body {
    min-width: 0;
    padding: var(--space-yield-5);
    overflow-y: auto;
}

.yield-share-preview {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: var(--radius-yield-share-md);
    background: var(--color-yield-share-card);
    color: var(--color-yield-ink);
}

.yield-share-preview canvas {
    width: 100%;
    height: auto;
    display: block;
}

.yield-share-link-field {
    margin-block-start: var(--space-yield-6);
}

.yield-share-link-field label {
    display: block;
    margin-block-end: var(--space-yield-2);
    color: var(--color-yield-ink-soft);
    font-family: var(--font-yield-display);
    font-size: var(--text-yield-md);
    font-weight: 700;
}

.yield-share-link-control {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: var(--space-yield-2);
}

#yield-share-link {
    width: 100%;
    min-width: 0;
    height: 48px;
    padding-inline: var(--space-yield-3);
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: var(--radius-yield-share-sm);
    outline: 2px solid transparent;
    outline-offset: 1px;
    background: var(--color-yield-surface-raised);
    color: var(--color-yield-ink-soft);
    font-family: var(--font-yield-data);
    font-size: var(--text-yield-sm);
    font-variant-numeric: tabular-nums;
}

#yield-share-copy-link {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: var(--radius-yield-share-sm);
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: var(--color-yield-surface-raised);
    color: var(--color-yield-ink);
    cursor: pointer;
    transition: background-color var(--dur-yield-short) var(--ease-yield-out), color var(--dur-yield-short) var(--ease-yield-out), border-color var(--dur-yield-short) var(--ease-yield-out), transform var(--dur-yield-instant) var(--ease-yield-out);
}

#yield-share-copy-link svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.yield-share-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-yield-3);
    margin-block-start: var(--space-yield-5);
}

.yield-share-action {
    min-width: 0;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-yield-3);
    padding-inline: var(--space-yield-4);
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: var(--radius-yield-share-sm);
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: var(--color-yield-surface-raised);
    color: var(--color-yield-ink);
    font-family: var(--font-yield-display);
    font-size: var(--text-yield-md);
    font-weight: 720;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-yield-short) var(--ease-yield-out), color var(--dur-yield-short) var(--ease-yield-out), border-color var(--dur-yield-short) var(--ease-yield-out), transform var(--dur-yield-instant) var(--ease-yield-out);
}

.yield-share-action svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#yield-share-x > span {
    display: inline-flex;
    align-items: center;
    height: 19px;
    line-height: 19px;
}

#yield-share-x > svg {
    display: block;
    align-self: center;
    transform: translateY(-1px);
}

.yield-share-action--primary {
    border-color: var(--color-yield-accent);
    background: var(--color-yield-accent);
    color: var(--color-yield-accent-ink);
}

.yield-share-action--primary[data-state="success"] {
    border-color: var(--color-yield-positive);
    background: var(--color-yield-positive);
    color: var(--color-yield-paper);
}

.yield-share-action--primary[data-state="error"] {
    border-color: var(--color-yield-error);
    background: var(--color-yield-error);
    color: var(--color-yield-paper);
}

.yield-share-status {
    min-height: 1lh;
    margin: var(--space-yield-3) 0 0;
    color: var(--color-yield-error);
    font-size: var(--text-yield-xs);
    line-height: 1.4;
    text-align: center;
}

.yield-share-quality {
    margin: var(--space-yield-2) 0 0;
    color: var(--color-yield-faint);
    font-family: var(--font-yield-body);
    font-size: var(--text-yield-xs);
    line-height: 1.5;
    text-align: center;
}

@media (hover: hover) and (pointer: fine) {
    #yield-calculator-page .yield-share-trigger:hover {
        background: var(--color-yield-ink-soft);
        color: var(--color-yield-paper);
    }

    .yield-share-close:hover,
    #yield-share-copy-link:hover,
    .yield-share-action:hover {
        background: var(--color-yield-surface-hover);
        color: var(--color-yield-ink);
    }

    .yield-share-action--primary:hover {
        border-color: var(--color-yield-accent-hover);
        background: var(--color-yield-accent-hover);
        color: var(--color-yield-accent-ink);
    }
}

@media (min-width: 40rem) {
    .yield-share-header {
        min-height: 76px;
        padding-inline: var(--space-yield-6);
    }

    .yield-share-body {
        padding: var(--space-yield-6);
    }

    .yield-share-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (pointer: coarse) {
    #yield-calculator-page .yield-share-trigger,
    .yield-share-close,
    .yield-share-action,
    #yield-share-copy-link {
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yield-share-dialog,
    .yield-share-dialog::backdrop,
    .yield-share-dialog *,
    #yield-calculator-page .yield-share-trigger {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@keyframes yield-share-dialog-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes yield-share-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Hallmark · component: calculator workbench · genre: modern-minimal · theme: existing FomoHub Coral
 * states: layout-only · pre-emit critique: P5 H5 E5 S5 R5 V5 · contrast: pass · responsive: pass
 */
#main-content:has(#yield-calculator-page:not([style*="display: none"])) {
    max-width: none;
    padding-inline: 0;
    gap: 0;
}

/* Markets and the global header share one 1420px grid. The dashboard already
   owns its 22px inner gutters, so the page shell must not add the legacy
   1100px constraint and a second horizontal inset. */
#main-content:has(#exchanges-dashboard-page:not([style*="display: none"])) {
    max-width: 1420px;
    padding-inline: 0;
}

/* Funding Arbitrage uses the same 1420px grid and 22px working gutters as Markets. */
#main-content:has(#anomaly-ticker-section:not([style*="display: none"])) {
    max-width: 1420px;
    padding-inline: 22px;
}

#yield-calculator-page .yield-shell {
    padding-inline: clamp(var(--space-yield-4), 3.5vw, var(--space-yield-12));
}

#yield-calculator-page .yield-workbench {
    overflow: hidden;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    background: var(--color-yield-surface);
}

#yield-calculator-page .yield-input-panel,
#yield-calculator-page .yield-output-panel {
    padding: var(--space-yield-6) var(--space-yield-5);
}

#yield-calculator-page .yield-input-panel {
    background: var(--color-yield-surface);
}

#yield-calculator-page .yield-output-panel {
    background: var(--color-yield-paper);
}

#yield-calculator-page .yield-panel-heading {
    margin-block-end: var(--space-yield-10);
}

#yield-calculator-page .yield-field {
    margin-block-end: var(--space-yield-6);
}

#yield-calculator-page .yield-field-pair {
    gap: var(--space-yield-5);
}

#yield-calculator-page .yield-allocation-presets {
    margin-block-start: var(--space-yield-1);
}

#yield-calculator-page .yield-form-actions {
    padding-block-start: var(--space-yield-10);
}

#yield-calculator-page .yield-result-context {
    margin-block-end: var(--space-yield-10);
}

#yield-calculator-page .yield-primary-results {
    margin-block-end: var(--space-yield-10);
}

#yield-calculator-page .yield-primary-results > div {
    padding-block: var(--space-yield-6);
}

#yield-calculator-page .yield-result-ledger h3,
#yield-calculator-page .yield-scenarios h3 {
    margin-block-end: var(--space-yield-5);
}

#yield-calculator-page .yield-result-ledger > div {
    min-height: 68px;
    padding: var(--space-yield-4) var(--space-yield-3);
}

#yield-calculator-page .yield-disclaimer {
    margin-block-start: var(--space-yield-10);
}

@media (min-width: 40rem) {
    #yield-calculator-page .yield-input-panel,
    #yield-calculator-page .yield-output-panel {
        padding: var(--space-yield-10);
    }
}

@media (min-width: 60rem) and (max-width: 67.99rem) {
    #yield-calculator-page .yield-workbench {
        grid-template-columns: minmax(0, 1fr);
    }

    #yield-calculator-page .yield-input-panel {
        border-inline-end: 0;
    }

    #yield-calculator-page .yield-output-panel {
        border-block-start: var(--rule-yield) solid var(--color-yield-rule);
    }
}

@media (min-width: 68rem) {
    #yield-calculator-page .yield-workbench {
        grid-template-columns: minmax(0, 0.96fr) minmax(0, 1.04fr);
    }

    #yield-calculator-page .yield-input-panel,
    #yield-calculator-page .yield-output-panel {
        padding: var(--space-yield-12);
    }

    #yield-calculator-page .yield-input-panel {
        border-inline-end: var(--rule-yield) solid var(--color-yield-rule);
    }

    #yield-calculator-page .yield-output-panel {
        border-block-start: 0;
    }
}

/* Tighten the exchange identity in the All Exchange Rates cards. */
#strategy-overlay .strategy-rate-exchange {
    gap: 6px;
}

#strategy-overlay .strategy-rate-exchange .ex-logo {
    margin-inline-end: 0;
}

/* Shared token-to-overview action used by strategy and history surfaces. */
.token-overview-button {
    max-width: 100%;
    margin: 0;
    border: 0;
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color 150ms var(--ease-out);
}

#history-table-title .history-token-link {
    min-width: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0;
}

#single-ex-history-table-title .history-token-link {
    min-width: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-xs);
    padding: 0;
}

@media (hover: hover) {
    #strategy-overlay .token-overview-button:hover,
    #backtest-overlay .token-overview-button:hover,
    #single-ex-modal .token-overview-button:hover,
    #history-table-title .token-overview-button:hover,
    #single-ex-history-table-title .token-overview-button:hover {
        background: transparent;
        color: var(--accent);
    }
}

#strategy-overlay .token-overview-button:focus-visible,
#backtest-overlay .token-overview-button:focus-visible,
#single-ex-modal .token-overview-button:focus-visible,
#history-table-title .token-overview-button:focus-visible,
#single-ex-history-table-title .token-overview-button:focus-visible {
    outline-color: var(--accent);
    color: var(--accent);
}

#strategy-overlay .token-overview-button:active,
#backtest-overlay .token-overview-button:active,
#single-ex-modal .token-overview-button:active,
#history-table-title .token-overview-button:active,
#single-ex-history-table-title .token-overview-button:active {
    background: transparent;
    color: var(--accent-hover);
}

/* Keep period controls visually closed on the 1D side. */
#history-table-modal .history-timeframe-selector,
#single-ex-history-table-modal .history-timeframe-selector {
    border-inline-start: 1px solid var(--border-primary) !important;
    box-shadow: inset 1px 0 0 var(--border-primary);
}

/* Keep the left edge visible even when the selector lands on a fractional pixel. */
#history-table-modal .history-timeframe-btn:first-child,
#single-ex-history-table-modal .history-timeframe-btn:first-child {
    border-inline-start: 1px solid var(--border-primary) !important;
}

/* Preserve the outer divider beside the Funding Detail scroll surface. */
#single-ex-history-table-modal {
    border-inline-end: 1px solid var(--border-primary) !important;
}

#single-ex-history-table-modal > .modal-body {
    box-shadow: inset -1px 0 0 var(--border-primary);
}

.token-overview-button:disabled {
    opacity: 0.5;
    color: var(--text-muted);
    cursor: not-allowed;
}

/* Hallmark · component: calculator workbench · genre: modern-minimal · theme: studied-DNA (user calculator reference)
 * layout: responsive split · states: layout-only · pre-emit critique: P5 H5 E5 S5 R5 V5
 */
#yield-calculator-page .yield-calculator-card {
    width: min(100%, 1040px);
    min-width: 0;
    margin-inline-end: auto;
    overflow: clip;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: var(--radius-yield-card);
    background: var(--color-yield-surface);
    color: var(--color-yield-ink);
}

#yield-calculator-page .yield-card-header {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-yield-4);
    padding: var(--space-yield-5) var(--space-yield-5) var(--space-yield-3);
}

#yield-calculator-page .yield-card-identity {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-yield-3);
}

#yield-calculator-page .yield-card-logo {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: 50%;
    background: var(--color-yield-paper);
}

#yield-calculator-page .yield-card-logo .ex-logo {
    width: 32px;
    height: 32px;
    margin: 0;
    object-fit: contain;
}

#yield-calculator-page .yield-card-identity h2 {
    min-width: 0;
    margin: 0;
    color: var(--color-yield-ink);
    font-family: var(--font-yield-display);
    font-size: 1.24rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    overflow-wrap: anywhere;
}

#yield-calculator-page .yield-card-identity p {
    margin: var(--space-yield-1) 0 0;
    color: var(--color-yield-muted);
    font-size: var(--text-yield-sm);
    line-height: 1.25;
}

#yield-calculator-page .yield-card-protocol-trigger {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: grid;
    place-items: center;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: var(--radius-yield-card-inner);
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: var(--color-yield-surface-raised);
    color: var(--color-yield-muted);
    cursor: pointer;
    transition: background-color var(--dur-yield-short) var(--ease-yield-out), color var(--dur-yield-short) var(--ease-yield-out), transform var(--dur-yield-instant) var(--ease-yield-out);
}

#yield-calculator-page .yield-card-protocol-trigger svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#yield-calculator-page .yield-card-status {
    width: fit-content;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: var(--space-yield-2);
    margin: 0 var(--space-yield-5) var(--space-yield-5);
    padding-inline: var(--space-yield-3);
    border: var(--rule-yield) solid var(--color-yield-card-accent-strong);
    border-radius: var(--radius-yield-card-inner);
    background: var(--color-yield-card-accent-quiet);
    color: var(--color-yield-card-accent);
    font-family: var(--font-yield-display);
    font-size: var(--text-yield-xs);
    font-weight: 750;
    line-height: 1;
}

#yield-calculator-page .yield-card-status-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--color-yield-card-accent);
}

#yield-calculator-page .yield-calculator-card > .yield-mode-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-inline: var(--space-yield-5);
    border-block: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-calculator-card .yield-mode-tab {
    min-height: 48px;
    font-size: var(--text-yield-sm);
}

#yield-calculator-page .yield-calculator-card .yield-workbench {
    display: block;
    margin: 0;
    overflow: visible;
    border: 0;
    background: var(--color-yield-surface);
}

#yield-calculator-page .yield-calculator-card .yield-input-panel,
#yield-calculator-page .yield-calculator-card .yield-output-panel {
    padding: var(--space-yield-5);
    border: 0;
}

#yield-calculator-page .yield-calculator-card .yield-input-panel {
    background: var(--color-yield-surface);
}

#yield-calculator-page .yield-mode-hero {
    min-width: 0;
    padding-block: var(--space-yield-2) var(--space-yield-4);
}

#yield-calculator-page .yield-mode-hero > span {
    display: block;
    color: var(--color-yield-muted);
    font-family: var(--font-yield-display);
    font-size: var(--text-yield-sm);
    font-weight: 700;
}

#yield-calculator-page .yield-mode-hero > strong {
    display: block;
    min-width: 0;
    margin-block-start: var(--space-yield-2);
    color: var(--color-yield-card-accent);
    font-family: var(--font-yield-display);
    font-size: clamp(2.6rem, 12vw, 4rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.055em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

#yield-calculator-page .yield-mode-hero > p {
    margin: var(--space-yield-2) 0 0;
    color: var(--color-yield-faint);
    font-size: var(--text-yield-sm);
    line-height: 1.45;
}

#yield-calculator-page .yield-mode-hero--efficiency[data-tone="negative"] > strong {
    color: var(--color-yield-negative);
}

#yield-calculator-page .yield-scenario-visual,
#yield-calculator-page .yield-cost-preview,
#yield-calculator-page .yield-efficiency-preview {
    margin-block-end: var(--space-yield-4);
    padding: var(--space-yield-4);
    border-radius: var(--radius-yield-card-inner);
    background: var(--color-yield-paper);
    color: var(--color-yield-ink);
}

#yield-calculator-page .yield-scenario-visual-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-yield-3);
    margin-block-end: var(--space-yield-3);
    color: var(--color-yield-muted);
    font-size: var(--text-yield-xs);
    font-weight: 700;
}

#yield-calculator-page .yield-scenario-bars {
    display: grid;
    gap: var(--space-yield-2);
}

#yield-calculator-page .yield-scenario-bar-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 90px;
    align-items: center;
    gap: var(--space-yield-2);
    color: var(--color-yield-muted);
    font-family: var(--font-yield-data);
    font-size: var(--text-yield-xs);
    font-variant-numeric: tabular-nums;
}

#yield-calculator-page .yield-scenario-bar-track,
#yield-calculator-page .yield-preview-track {
    min-width: 0;
    height: 10px;
    overflow: hidden;
    border-radius: var(--radius-yield-card-inner);
    background: var(--color-yield-card-track);
}

#yield-calculator-page .yield-scenario-bar-track > i,
#yield-calculator-page .yield-preview-track > i {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    background: var(--color-yield-card-accent-strong);
    transform-origin: left center;
    transform: scaleX(var(--yield-bar-scale, 0));
    transition: transform var(--dur-yield-medium) var(--ease-yield-out), opacity var(--dur-yield-short) var(--ease-yield-out);
}

#yield-calculator-page .yield-scenario-bar-row.is-target {
    color: var(--color-yield-ink);
    font-weight: 750;
}

#yield-calculator-page .yield-scenario-bar-row.is-target .yield-scenario-bar-track > i {
    background: var(--color-yield-card-accent);
}

#yield-calculator-page .yield-scenario-bar-row > strong {
    color: inherit;
    font-weight: 750;
    text-align: end;
    white-space: nowrap;
}

#yield-calculator-page .yield-fdv-presets {
    display: grid;
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    gap: var(--space-yield-2);
    margin-block-end: var(--space-yield-4);
}

#yield-calculator-page .yield-fdv-presets button {
    min-height: 44px;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: var(--radius-yield-card-inner);
    outline: 2px solid transparent;
    outline-offset: 2px;
    background: var(--color-yield-surface-raised);
    color: var(--color-yield-muted);
    font-family: var(--font-yield-data);
    font-size: var(--text-yield-sm);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-yield-short) var(--ease-yield-out), border-color var(--dur-yield-short) var(--ease-yield-out), color var(--dur-yield-short) var(--ease-yield-out), transform var(--dur-yield-instant) var(--ease-yield-out);
}

#yield-calculator-page .yield-fdv-presets button.is-active {
    border-color: var(--color-yield-card-accent-strong);
    background: var(--color-yield-card-accent-quiet);
    color: var(--color-yield-card-accent);
}

#yield-calculator-page .yield-cost-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-yield-3);
}

#yield-calculator-page .yield-cost-preview > div {
    min-width: 0;
    display: grid;
    gap: var(--space-yield-1);
}

#yield-calculator-page .yield-cost-preview span,
#yield-calculator-page .yield-efficiency-preview-row > span {
    color: var(--color-yield-muted);
    font-size: var(--text-yield-xs);
    font-weight: 700;
}

#yield-calculator-page .yield-cost-preview strong,
#yield-calculator-page .yield-efficiency-preview-row > strong {
    color: var(--color-yield-ink);
    font-family: var(--font-yield-data);
    font-size: var(--text-yield-md);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

#yield-calculator-page .yield-efficiency-preview {
    display: grid;
    gap: var(--space-yield-3);
}

#yield-calculator-page .yield-efficiency-preview-row {
    min-width: 0;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 88px;
    align-items: center;
    gap: var(--space-yield-2);
}

#yield-calculator-page .yield-efficiency-preview-row > strong {
    text-align: end;
}

#yield-calculator-page .yield-calculator-card .yield-field {
    margin-block-end: var(--space-yield-3);
}

#yield-calculator-page .yield-calculator-card .yield-input-wrap {
    min-height: 52px;
    border-radius: var(--radius-yield-card-inner);
    background: var(--color-yield-paper);
}

#yield-calculator-page .yield-calculator-card .yield-input-wrap input {
    height: 50px;
}

#yield-calculator-page .yield-calculator-card .yield-output-panel {
    margin: 0 var(--space-yield-5);
    padding: var(--space-yield-5);
    border-radius: var(--radius-yield-card-inner);
    background: var(--color-yield-surface-raised);
}

#yield-calculator-page .yield-calculator-card .yield-result-hero {
    margin-block-start: var(--space-yield-2);
    color: var(--color-yield-card-accent);
    font-size: clamp(2.35rem, 10vw, 3.65rem);
}

#yield-calculator-page .yield-calculator-card .yield-result-context {
    margin: var(--space-yield-2) 0 var(--space-yield-4);
    font-size: var(--text-yield-sm);
}

#yield-calculator-page .yield-calculator-card .yield-primary-results {
    margin-block-end: var(--space-yield-4);
}

#yield-calculator-page .yield-calculator-card .yield-primary-results > div {
    padding-block: var(--space-yield-3);
}

#yield-calculator-page .yield-calculator-card .yield-primary-results strong {
    font-size: 1.35rem;
}

#yield-calculator-page .yield-calculator-card .yield-result-ledger h3 {
    grid-column: 1 / -1;
    margin-block-end: var(--space-yield-2);
    font-size: var(--text-yield-md);
}

#yield-calculator-page .yield-calculator-card .yield-result-ledger > div {
    min-height: 48px;
    padding: var(--space-yield-2) 0;
}

@media (min-width: 40rem) {
    #yield-calculator-page .yield-calculator-card .yield-result-ledger {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-yield-5);
    }
}

#yield-calculator-page .yield-calculator-card .yield-result-ledger span,
#yield-calculator-page .yield-calculator-card .yield-result-ledger strong {
    font-size: var(--text-yield-sm);
}

#yield-calculator-page .yield-calculator-card .yield-form-actions {
    display: grid;
    grid-template-columns: minmax(100px, 0.34fr) minmax(0, 1fr);
    gap: var(--space-yield-3);
    margin: 0;
    padding: var(--space-yield-5);
}

#yield-calculator-page .yield-calculator-card .yield-share-trigger,
#yield-calculator-page .yield-calculator-card .yield-open-protocol {
    width: 100%;
    min-height: 52px;
    border-radius: var(--radius-yield-card-inner);
}

#yield-calculator-page .yield-calculator-card .yield-share-trigger {
    border-color: var(--color-yield-rule-strong);
    background: var(--color-yield-paper);
    color: var(--color-yield-ink);
}

#yield-calculator-page .yield-calculator-card .yield-open-protocol {
    border-color: var(--color-yield-card-accent-strong);
    background: var(--color-yield-card-accent-quiet);
    color: var(--color-yield-card-accent);
}

#yield-calculator-page .yield-calculator-card .yield-disclaimer {
    margin: 0;
    padding: 0 var(--space-yield-5) var(--space-yield-5);
    color: var(--color-yield-faint);
}

#yield-calculator-page .yield-card-protocol-trigger:focus-visible,
#yield-calculator-page .yield-fdv-presets button:focus-visible {
    outline-color: var(--color-yield-focus);
}

#yield-calculator-page .yield-card-protocol-trigger:active,
#yield-calculator-page .yield-fdv-presets button:active {
    transform: translateY(1px);
}

#yield-calculator-page .yield-card-protocol-trigger:disabled,
#yield-calculator-page .yield-fdv-presets button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#yield-calculator-page .yield-fdv-presets button[data-state="loading"]::after {
    width: 12px;
    height: 12px;
    margin-inline-start: var(--space-yield-1);
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-block-start-color: currentColor;
    border-radius: 50%;
    content: "";
    animation: yield-control-spin 800ms linear infinite;
}

#yield-calculator-page .yield-fdv-presets button[data-state="error"] {
    border-color: var(--color-yield-error);
    color: var(--color-yield-error);
}

#yield-calculator-page .yield-fdv-presets button[data-state="success"] {
    border-color: var(--color-yield-card-accent-strong);
    color: var(--color-yield-card-accent);
}

@media (hover: hover) and (pointer: fine) {
    #yield-calculator-page .yield-card-protocol-trigger:hover,
    #yield-calculator-page .yield-fdv-presets button:hover {
        background: var(--color-yield-surface-hover);
        color: var(--color-yield-ink);
    }

    #yield-calculator-page .yield-calculator-card .yield-share-trigger:hover {
        background: var(--color-yield-surface-hover);
        color: var(--color-yield-ink);
    }

    #yield-calculator-page .yield-calculator-card .yield-open-protocol:hover {
        border-color: var(--color-yield-card-accent);
        background: var(--color-yield-card-accent-strong);
        color: var(--color-yield-card-accent-ink);
        transform: translateY(-1px);
    }
}

@media (min-width: 40rem) {
    #yield-calculator-page .yield-card-header {
        padding: var(--space-yield-6) var(--space-yield-6) var(--space-yield-3);
    }

    #yield-calculator-page .yield-card-status {
        margin-inline: var(--space-yield-6);
    }

    #yield-calculator-page .yield-calculator-card > .yield-mode-tabs {
        padding-inline: var(--space-yield-6);
    }

    #yield-calculator-page .yield-calculator-card .yield-input-panel {
        padding: var(--space-yield-6);
    }

    #yield-calculator-page .yield-calculator-card .yield-output-panel {
        margin-inline: var(--space-yield-6);
        padding: var(--space-yield-6);
    }

    #yield-calculator-page .yield-calculator-card .yield-form-actions {
        padding: var(--space-yield-6);
    }

    #yield-calculator-page .yield-calculator-card .yield-disclaimer {
        padding: 0 var(--space-yield-6) var(--space-yield-6);
    }
}

@media (min-width: 64rem) {
    #yield-calculator-page .yield-calculator-card .yield-workbench {
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
        align-items: start;
    }

    #yield-calculator-page .yield-calculator-card .yield-input-panel {
        min-width: 0;
        grid-column: 1;
    }

    #yield-calculator-page .yield-calculator-card .yield-output-panel {
        min-width: 0;
        grid-column: 2;
        margin: var(--space-yield-6) var(--space-yield-6) var(--space-yield-6) 0;
    }

    #yield-calculator-page .yield-calculator-card .yield-form-actions,
    #yield-calculator-page .yield-calculator-card .yield-disclaimer {
        grid-column: 1 / -1;
    }
}

@media (max-width: 39.99rem) {
    #yield-calculator-page .yield-calculator-card {
        border-radius: var(--radius-yield-card-inner);
    }

    #yield-calculator-page .yield-card-header,
    #yield-calculator-page .yield-calculator-card .yield-input-panel {
        padding-inline: var(--space-yield-4);
    }

    #yield-calculator-page .yield-card-status {
        max-width: calc(100% - (var(--space-yield-4) * 2));
        margin-inline: var(--space-yield-4);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #yield-calculator-page .yield-calculator-card > .yield-mode-tabs {
        padding-inline: var(--space-yield-4);
    }

    #yield-calculator-page .yield-calculator-card .yield-mode-tab {
        padding-inline: var(--space-yield-1);
        font-size: 0.72rem;
    }

    #yield-calculator-page .yield-scenario-visual,
    #yield-calculator-page .yield-cost-preview,
    #yield-calculator-page .yield-efficiency-preview {
        padding: var(--space-yield-3);
    }

    #yield-calculator-page .yield-scenario-bar-row {
        grid-template-columns: 54px minmax(0, 1fr) 72px;
        gap: var(--space-yield-1);
        font-size: 0.66rem;
    }

    #yield-calculator-page .yield-efficiency-preview-row {
        grid-template-columns: 88px minmax(0, 1fr) 72px;
        font-size: 0.66rem;
    }

    #yield-calculator-page .yield-fdv-presets {
        gap: var(--space-yield-1);
    }

    #yield-calculator-page .yield-fdv-presets button {
        padding-inline: var(--space-yield-1);
        font-size: 0.72rem;
    }

    #yield-calculator-page .yield-calculator-card .yield-output-panel {
        margin-inline: var(--space-yield-4);
        padding: var(--space-yield-4);
    }

    #yield-calculator-page .yield-calculator-card .yield-form-actions {
        grid-template-columns: 1fr;
        padding-inline: var(--space-yield-4);
    }

    #yield-calculator-page .yield-calculator-card .yield-disclaimer {
        padding-inline: var(--space-yield-4);
    }
}

@media (pointer: coarse) {
    #yield-calculator-page .yield-card-protocol-trigger,
    #yield-calculator-page .yield-fdv-presets button {
        min-height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #yield-calculator-page .yield-scenario-bar-track > i,
    #yield-calculator-page .yield-preview-track > i,
    #yield-calculator-page .yield-card-protocol-trigger,
    #yield-calculator-page .yield-fdv-presets button {
        transition-duration: 0.01ms !important;
    }
}

/* Yield Calculator: Impeccable focused workbench. */
#yield-calculator-page {
    --yield-content-width: 1180px;
    --yield-card-width: 880px;
    --yield-inner-width: 740px;
    min-height: calc(100vh - var(--header-height));
    padding: 0;
}

#yield-calculator-page .yield-shell {
    width: min(100%, var(--yield-content-width));
    max-width: none;
    margin-inline: auto;
    padding: clamp(40px, 5vw, 64px) clamp(16px, 3vw, 28px) 72px;
}

#yield-calculator-page .yield-page-header {
    width: min(100%, var(--yield-card-width));
    max-width: none;
    margin: 0 auto 28px;
}

#yield-calculator-page .yield-page-header h1 {
    max-width: 14ch;
    font-size: clamp(2.65rem, 5vw, 4.15rem);
    line-height: 0.96;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

#yield-calculator-page .yield-page-header p {
    max-width: 58ch;
    margin-block-start: 12px;
    color: var(--color-yield-ink-soft);
    font-size: 1rem;
    line-height: 1.45;
}

#yield-calculator-page .yield-protocol-section {
    width: 100%;
    margin: 0 auto 24px;
}

#yield-calculator-page .yield-protocol-list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    padding: 0;
    overflow: visible;
}

#yield-calculator-page .yield-protocol-button {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    gap: 8px;
    padding-inline: 10px;
    overflow: hidden;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: 0;
    background: var(--color-yield-surface);
    color: var(--color-yield-ink-soft);
    font-size: 0.78rem;
    font-weight: 750;
    text-overflow: ellipsis;
    transition: border-color 160ms var(--ease-yield-out), background-color 160ms var(--ease-yield-out), color 160ms var(--ease-yield-out), transform 120ms var(--ease-yield-out);
}

#yield-calculator-page .yield-protocol-button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

#yield-calculator-page .yield-protocol-button .ex-logo {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

#yield-calculator-page .yield-protocol-button.is-active {
    border-color: var(--color-yield-accent);
    background: var(--color-yield-accent-quiet);
    color: var(--color-yield-ink);
}

#yield-calculator-page .yield-calculator-card {
    width: min(100%, var(--yield-card-width));
    margin-inline: auto;
    overflow: clip;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: 14px;
    background: var(--color-yield-surface);
}

#yield-calculator-page .yield-card-header {
    justify-content: flex-start;
    padding: 20px clamp(22px, 4vw, 36px);
    border-block-end: var(--rule-yield) solid var(--color-yield-rule);
    background: var(--color-yield-surface-raised);
}

#yield-calculator-page .yield-card-identity {
    width: min(100%, var(--yield-inner-width));
    margin-inline: auto;
    gap: 12px;
}

#yield-calculator-page .yield-card-logo {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 10px;
    background: var(--color-yield-paper);
}

#yield-calculator-page .yield-card-logo .ex-logo {
    width: 30px;
    height: 30px;
}

#yield-calculator-page .yield-card-identity h2 {
    font-size: 1.24rem;
    letter-spacing: -0.02em;
}

#yield-calculator-page .yield-point-model {
    border-block-start: 0;
    background: transparent;
}

#yield-calculator-page .yield-point-inputs {
    width: min(calc(100% - 44px), var(--yield-inner-width));
    max-width: none;
    margin-inline: auto;
    padding: 32px 0 28px;
    gap: 22px;
    background: transparent;
}

#yield-calculator-page .yield-point-field {
    gap: 10px;
}

#yield-calculator-page .yield-point-field-label,
#yield-calculator-page .yield-point-field > label {
    color: var(--color-yield-ink);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

#yield-calculator-page .yield-point-presets {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

#yield-calculator-page .yield-point-presets button {
    min-height: 50px;
    border-radius: 0;
    background: var(--color-yield-paper);
    color: var(--color-yield-ink-soft);
    font-size: 0.82rem;
    font-weight: 750;
    transition: border-color 160ms var(--ease-yield-out), background-color 160ms var(--ease-yield-out), color 160ms var(--ease-yield-out), transform 120ms var(--ease-yield-out);
}

#yield-calculator-page .yield-point-presets button.is-active {
    border-color: var(--color-yield-positive);
    background: var(--color-yield-card-accent-quiet);
    color: var(--color-yield-positive);
}

#yield-calculator-page .yield-point-input-wrap {
    min-height: 60px;
    border-radius: 0;
    background: var(--color-yield-paper);
}

#yield-calculator-page .yield-point-input-wrap:focus-within {
    border-color: var(--color-yield-positive);
    box-shadow: 0 0 0 1px var(--color-yield-positive);
}

#yield-calculator-page .yield-point-input-wrap input {
    height: 58px;
    padding-inline: 18px;
    color: var(--color-yield-ink);
    font-size: 1.16rem;
    font-weight: 700;
    caret-color: var(--color-yield-positive);
    font-variant-numeric: tabular-nums;
}

#yield-calculator-page .yield-point-input-wrap input::placeholder {
    color: var(--color-yield-muted);
    opacity: 1;
}

#yield-calculator-page .yield-point-estimate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 8px 28px;
    min-height: 144px;
    margin-block-start: 4px;
    padding: 24px 26px;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: 12px;
    background: var(--color-yield-paper);
    text-align: start;
}

#yield-calculator-page .yield-point-estimate > span {
    grid-column: 1;
    display: block;
    color: var(--color-yield-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

#yield-calculator-page .yield-point-estimate > strong {
    grid-column: 1;
    margin: 0;
    color: var(--color-yield-ink);
    font-size: clamp(2.35rem, 5vw, 3.45rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
}

#yield-calculator-page .yield-point-estimate[data-tone="positive"] > strong {
    color: var(--color-yield-card-accent);
}

#yield-calculator-page .yield-point-estimate > p {
    grid-column: 2;
    grid-row: 1 / 3;
    max-width: 26ch;
    margin: 0;
    padding-inline-start: 24px;
    border-inline-start: var(--rule-yield) solid var(--color-yield-rule);
    color: var(--color-yield-ink-soft);
    font-size: 0.82rem;
    line-height: 1.55;
}

#yield-calculator-page .yield-point-estimate > p span {
    color: var(--color-yield-ink);
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

#yield-calculator-page .yield-point-actions {
    grid-template-columns: minmax(160px, 0.34fr) minmax(260px, 0.66fr);
    width: min(calc(100% - 44px), var(--yield-inner-width));
    margin-inline: auto;
    padding: 24px 0 12px;
    border-block-start: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-point-actions .yield-share-trigger,
#yield-calculator-page .yield-point-actions .yield-open-protocol {
    min-height: 52px;
    border-radius: 0;
    white-space: nowrap;
}

#yield-calculator-page .yield-point-actions .yield-share-trigger {
    background: var(--color-yield-paper);
}

#yield-calculator-page .yield-point-actions .yield-open-protocol {
    border-color: var(--color-yield-positive);
    background: var(--color-yield-card-accent-quiet);
    color: var(--color-yield-positive);
}

#yield-calculator-page .yield-point-actions .yield-open-protocol .ex-logo {
    width: 20px;
    height: 20px;
}

#yield-calculator-page .yield-point-disclaimer {
    width: min(calc(100% - 44px), var(--yield-inner-width));
    max-width: 72ch;
    margin-inline: auto;
    padding: 0 0 24px;
    color: var(--color-yield-muted);
    font-size: 0.72rem;
    line-height: 1.5;
    text-align: center;
}

#yield-calculator-page ::selection {
    background: var(--color-yield-accent);
    color: var(--color-yield-ink);
}

@media (hover: hover) and (pointer: fine) {
    #yield-calculator-page .yield-protocol-button:hover,
    #yield-calculator-page .yield-point-presets button:hover {
        border-color: var(--color-yield-ink-soft);
        background: var(--color-yield-surface-hover);
        color: var(--color-yield-ink);
    }

    #yield-calculator-page .yield-protocol-button.is-active:hover {
        border-color: var(--color-yield-accent);
        background: var(--color-yield-accent-quiet);
    }

    #yield-calculator-page .yield-point-presets button.is-active:hover,
    #yield-calculator-page .yield-point-actions .yield-open-protocol:hover {
        border-color: var(--color-yield-positive);
        background: color-mix(in srgb, var(--color-yield-card-accent-quiet) 84%, var(--color-yield-positive) 16%);
        color: var(--color-yield-positive);
    }
}

@media (max-width: 72rem) {
    #yield-calculator-page .yield-shell {
        width: min(100%, 900px);
    }

    #yield-calculator-page .yield-protocol-list {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 8px;
        margin-inline: calc(clamp(16px, 3vw, 28px) * -1);
        padding: 0 clamp(16px, 3vw, 28px) 8px;
        overflow-x: auto;
        scroll-padding-inline: clamp(16px, 3vw, 28px);
        scrollbar-width: thin;
    }

    #yield-calculator-page .yield-protocol-button {
        width: auto;
        min-width: 132px;
        flex: 0 0 auto;
        padding-inline: 14px;
    }
}

@media (max-width: 39.99rem) {
    #yield-calculator-page .yield-shell {
        width: 100%;
        padding: 32px 12px 52px;
    }

    #yield-calculator-page .yield-page-header {
        margin-block-end: 22px;
    }

    #yield-calculator-page .yield-page-header h1 {
        max-width: 100%;
        font-size: clamp(2rem, 10vw, 2.45rem);
        letter-spacing: -0.035em;
        overflow-wrap: normal;
        word-break: normal;
    }

    #yield-calculator-page .yield-page-header p {
        font-size: 0.9rem;
    }

    #yield-calculator-page .yield-protocol-list {
        margin-inline: -12px;
        padding-inline: 12px;
        scroll-padding-inline: 12px;
    }

    #yield-calculator-page .yield-protocol-button {
        min-width: 126px;
        min-height: 50px;
        justify-content: flex-start;
        font-size: 0.76rem;
    }

    #yield-calculator-page .yield-calculator-card {
        border-radius: 12px;
    }

    #yield-calculator-page .yield-card-header {
        padding: 16px;
    }

    #yield-calculator-page .yield-card-logo {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 8px;
    }

    #yield-calculator-page .yield-card-logo .ex-logo {
        width: 27px;
        height: 27px;
    }

    #yield-calculator-page .yield-point-inputs,
    #yield-calculator-page .yield-point-actions,
    #yield-calculator-page .yield-point-disclaimer {
        width: calc(100% - 28px);
    }

    #yield-calculator-page .yield-point-inputs {
        padding-block: 22px;
        gap: 18px;
    }

    #yield-calculator-page .yield-point-presets {
        display: flex;
        gap: 7px;
        padding-block-end: 4px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    #yield-calculator-page .yield-point-presets::-webkit-scrollbar {
        display: none;
    }

    #yield-calculator-page .yield-point-presets button,
    #yield-calculator-page .yield-point-presets button:last-child:nth-child(odd) {
        min-width: 88px;
        flex: 0 0 88px;
    }

    #yield-calculator-page .yield-point-estimate {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        min-height: 0;
        padding: 20px;
    }

    #yield-calculator-page .yield-point-estimate > span,
    #yield-calculator-page .yield-point-estimate > strong,
    #yield-calculator-page .yield-point-estimate > p {
        grid-column: 1;
        grid-row: auto;
    }

    #yield-calculator-page .yield-point-estimate > strong {
        font-size: clamp(2.2rem, 13vw, 3rem);
    }

    #yield-calculator-page .yield-point-estimate > p {
        max-width: none;
        margin-block-start: 8px;
        padding: 14px 0 0;
        border: 0;
        border-block-start: var(--rule-yield) solid var(--color-yield-rule);
    }

    #yield-calculator-page .yield-point-actions {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding-block-start: 18px;
    }

    #yield-calculator-page .yield-point-disclaimer {
        padding-block: 2px 20px;
        text-align: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    #yield-calculator-page .yield-protocol-button,
    #yield-calculator-page .yield-point-presets button {
        transition-duration: 0.01ms !important;
    }
}

/* Yield Calculator: reference-led allocation workbench in FomoHub's visual system. */
#yield-calculator-page {
    --yield-reference-width: 1380px;
}

#yield-calculator-page .yield-shell {
    width: min(100%, var(--yield-reference-width));
    padding: clamp(30px, 4vw, 54px) clamp(20px, 4vw, 48px) 88px;
}

#yield-calculator-page .yield-page-header {
    width: 100%;
    margin: 0 0 38px;
}

#yield-calculator-page .yield-page-header h1 {
    max-width: none;
    font-size: clamp(2.75rem, 4.6vw, 4.4rem);
    letter-spacing: -0.04em;
}

#yield-calculator-page .yield-page-header p {
    max-width: 66ch;
    margin-block-start: 12px;
    font-size: clamp(0.98rem, 1.5vw, 1.14rem);
}

#yield-calculator-page .yield-protocol-section {
    width: 100%;
    margin-block-end: 0;
}

#yield-calculator-page .yield-protocol-label {
    display: block;
    margin-block-end: 14px;
    color: var(--color-yield-ink);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    font-weight: 900;
    letter-spacing: -0.015em;
}

#yield-calculator-page .yield-protocol-list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    justify-content: stretch;
    gap: 8px;
    padding-block-end: 0;
    overflow: visible;
    scroll-padding-inline: 0;
    scrollbar-width: none;
}

#yield-calculator-page .yield-protocol-list::-webkit-scrollbar {
    display: none;
}

#yield-calculator-page .yield-protocol-list::-webkit-scrollbar-track {
    background: transparent;
}

#yield-calculator-page .yield-protocol-list::-webkit-scrollbar-thumb {
    border-radius: 0;
    background: var(--color-yield-rule-strong);
}

#yield-calculator-page .yield-protocol-button {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 52px;
    flex: none;
    justify-content: center;
    gap: 8px;
    padding-inline: 10px;
    border-color: var(--color-yield-rule);
    background: var(--color-yield-surface-raised);
    font-size: 0.75rem;
}

#yield-calculator-page .yield-protocol-button > span {
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -0.015em;
}

#yield-calculator-page .yield-protocol-button .ex-logo {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
}

#yield-calculator-page .yield-protocol-button.is-active {
    border-color: var(--color-yield-accent);
    background: var(--color-yield-accent-quiet);
}

#yield-calculator-page .yield-calculator-card {
    width: 100%;
    max-width: none;
    margin-block-start: 16px;
    overflow: visible;
    border: 0;
    border-block-start: var(--rule-yield) solid var(--color-yield-rule-strong);
    border-radius: 0;
    background: transparent;
}

#yield-calculator-page .yield-point-model {
    background: transparent;
}

#yield-calculator-page .yield-point-inputs {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 0;
    margin: 0;
    padding: 0;
}

#yield-calculator-page .yield-reference-inputs,
#yield-calculator-page .yield-reference-results {
    min-width: 0;
    padding-block: 38px 34px;
}

#yield-calculator-page .yield-reference-inputs {
    padding-inline-end: clamp(28px, 4vw, 54px);
    border-inline-end: var(--rule-yield) solid var(--color-yield-rule-strong);
}

#yield-calculator-page .yield-reference-results {
    padding-inline-start: clamp(28px, 4vw, 54px);
}

#yield-calculator-page .yield-reference-heading {
    margin-block-end: 30px;
}

#yield-calculator-page .yield-reference-heading h2 {
    margin: 0;
    color: var(--color-yield-ink);
    font-size: clamp(1.45rem, 2vw, 1.8rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

#yield-calculator-page .yield-reference-heading p {
    max-width: 48ch;
    margin-block-start: 8px;
    color: var(--color-yield-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

#yield-calculator-page .yield-point-field {
    display: grid;
    gap: 9px;
    margin-block-end: 22px;
}

#yield-calculator-page .yield-point-field > label,
#yield-calculator-page .yield-field-label-row label {
    color: var(--color-yield-ink);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

#yield-calculator-page .yield-field-help {
    margin: 0;
    color: var(--color-yield-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

#yield-calculator-page .yield-fdv-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

#yield-calculator-page .yield-fdv-unit-switch {
    display: grid;
    grid-template-columns: repeat(2, 52px);
    min-height: 58px;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    background: var(--color-yield-paper);
}

#yield-calculator-page .yield-fdv-unit-switch button {
    border: 0;
    border-inline-start: var(--rule-yield) solid transparent;
    background: transparent;
    color: var(--color-yield-muted);
    font-family: var(--font-yield-display);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

#yield-calculator-page .yield-fdv-unit-switch button + button {
    border-inline-start-color: var(--color-yield-rule);
}

#yield-calculator-page .yield-fdv-unit-switch button.is-active {
    background: var(--color-yield-ink);
    color: var(--color-yield-paper);
}

#yield-calculator-page .yield-point-input-wrap {
    min-height: 58px;
    display: flex;
    align-items: center;
    border: var(--rule-yield) solid var(--color-yield-rule-strong);
    background: var(--color-yield-surface-raised);
}

#yield-calculator-page .yield-point-input-wrap > span {
    flex: 0 0 auto;
    padding-inline: 16px 0;
    color: var(--color-yield-muted);
    font-family: var(--font-yield-data);
    font-size: 0.9rem;
    font-weight: 700;
}

#yield-calculator-page .yield-point-input-wrap--suffixed > span {
    padding-inline: 0 16px;
}

#yield-calculator-page .yield-point-input-wrap input {
    width: 100%;
    min-width: 0;
    height: 56px;
    padding-inline: 16px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--color-yield-ink);
    font-family: var(--font-yield-data);
    font-size: 1rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

#yield-calculator-page .yield-point-input-wrap--prefixed input {
    padding-inline-start: 10px;
}

#yield-calculator-page .yield-point-input-wrap:focus-within {
    border-color: var(--color-yield-focus);
    box-shadow: 0 0 0 1px var(--color-yield-focus);
}

#yield-calculator-page .yield-reference-field-row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 14px;
}

#yield-calculator-page .yield-reference-field-row > .yield-point-field {
    grid-template-rows: 28px auto auto;
}

#yield-calculator-page .yield-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#yield-calculator-page .yield-field-label-row button {
    border: 0;
    background: transparent;
    color: var(--color-yield-accent-hover);
    font-family: var(--font-yield-display);
    font-size: 0.69rem;
    font-weight: 800;
    cursor: pointer;
}

#yield-calculator-page .yield-field-label-row button[data-state="success"] {
    color: var(--color-yield-positive);
}

#yield-calculator-page .yield-point-model-note {
    margin: -6px 0 20px;
    padding: 10px 12px;
    border: var(--rule-yield) solid rgba(244, 183, 64, 0.35);
    color: var(--warning);
    font-size: 0.72rem;
    line-height: 1.45;
}

#yield-calculator-page .yield-point-actions {
    width: min(100%, 322px);
    display: grid;
    grid-template-columns: minmax(112px, 0.45fr) minmax(150px, 0.55fr);
    gap: 10px;
    margin: 10px 0 0;
    padding: 24px 0 0;
    border-block-start: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-point-actions .yield-share-trigger,
#yield-calculator-page .yield-point-actions .yield-open-protocol {
    min-height: 46px;
    height: 46px;
    border-radius: 0;
}

#yield-calculator-page .yield-point-actions .yield-share-trigger {
    border-color: var(--color-yield-rule-strong);
    background: var(--color-yield-ink);
    color: var(--color-yield-paper);
}

#yield-calculator-page .yield-point-actions .yield-open-protocol {
    border-color: var(--color-yield-accent);
    background: var(--color-yield-accent-quiet);
    color: var(--color-yield-accent-hover);
}

#yield-calculator-page .yield-point-actions .yield-open-protocol .ex-logo {
    width: 22px;
    height: 22px;
}

#yield-calculator-page .yield-result-summary {
    min-height: 170px;
}

#yield-calculator-page .yield-result-summary > span {
    display: block;
    color: var(--color-yield-accent-hover);
    font-size: 0.8rem;
    font-weight: 800;
}

#yield-calculator-page .yield-result-summary > strong {
    display: block;
    margin-block-start: 16px;
    color: var(--color-yield-ink);
    font-family: var(--font-yield-display);
    font-size: clamp(3.2rem, 6.2vw, 5.8rem);
    font-weight: 800;
    line-height: 0.88;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

#yield-calculator-page .yield-result-summary[data-tone="positive"] > strong {
    color: var(--color-yield-positive);
}

#yield-calculator-page .yield-result-summary > p {
    margin-block-start: 16px;
    color: var(--color-yield-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

#yield-calculator-page .yield-reference-primary-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block: 22px 0;
    border-block: var(--rule-yield) solid var(--color-yield-rule-strong);
}

#yield-calculator-page .yield-reference-primary-results > div {
    min-width: 0;
    padding: 22px 20px 22px 0;
}

#yield-calculator-page .yield-reference-primary-results > div + div {
    padding-inline: 28px 0;
    border-inline-start: var(--rule-yield) solid var(--color-yield-rule-strong);
}

#yield-calculator-page .yield-reference-primary-results span {
    display: block;
    color: var(--color-yield-muted);
    font-size: 0.78rem;
}

#yield-calculator-page .yield-reference-primary-results strong {
    display: block;
    margin-block-start: 8px;
    color: var(--color-yield-ink);
    font-family: var(--font-yield-data);
    font-size: clamp(1.25rem, 2vw, 1.65rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

#yield-calculator-page .yield-reference-ledger {
    margin: 0;
}

#yield-calculator-page .yield-reference-ledger > div {
    min-height: 62px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    border-block-end: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-reference-ledger dt {
    color: var(--color-yield-muted);
    font-size: 0.86rem;
}

#yield-calculator-page .yield-reference-ledger dd {
    margin: 0;
    color: var(--color-yield-ink);
    font-family: var(--font-yield-data);
    font-size: 0.9rem;
    font-weight: 800;
    text-align: end;
    font-variant-numeric: tabular-nums;
    transform: translateY(1px);
}

#yield-calculator-page .yield-reference-results .yield-point-disclaimer {
    width: auto;
    max-width: none;
    margin: 26px 0 0;
    padding: 0;
    color: var(--color-yield-muted);
    font-size: 0.7rem;
    line-height: 1.55;
    text-align: start;
    white-space: nowrap;
}

#yield-calculator-page .yield-fdv-unit-switch button:focus-visible,
#yield-calculator-page .yield-field-label-row button:focus-visible {
    outline: 2px solid var(--color-yield-focus);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    #yield-calculator-page .yield-fdv-unit-switch button:not(.is-active):hover {
        background: var(--color-yield-surface-hover);
        color: var(--color-yield-ink);
    }

    #yield-calculator-page .yield-field-label-row button:hover {
        color: var(--color-yield-ink);
    }

    #yield-calculator-page .yield-point-actions .yield-share-trigger:hover {
        background: var(--color-yield-ink-soft);
        color: var(--color-yield-paper);
    }

    #yield-calculator-page .yield-point-actions .yield-open-protocol:hover {
        border-color: var(--color-yield-accent-hover);
        background: color-mix(in srgb, var(--color-yield-accent-quiet) 78%, var(--color-yield-accent) 22%);
        color: var(--color-yield-ink);
    }
}

@media (max-width: 70rem) {
    #yield-calculator-page .yield-protocol-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-inline: 0;
        padding-inline: 0;
        overflow: visible;
        scroll-padding-inline: 0;
    }

    #yield-calculator-page .yield-protocol-button {
        min-width: 0;
        flex: none;
    }

    #yield-calculator-page .yield-point-inputs {
        grid-template-columns: minmax(0, 1fr);
    }

    #yield-calculator-page .yield-reference-inputs {
        padding-inline-end: 0;
        border-inline-end: 0;
    }

    #yield-calculator-page .yield-reference-results {
        padding: 34px 0 38px;
        border-block-start: var(--rule-yield) solid var(--color-yield-rule-strong);
    }
}

@media (max-width: 39.99rem) {
    #yield-calculator-page .yield-shell {
        padding: 32px 14px 64px;
    }

    #yield-calculator-page .yield-page-header {
        margin-block-end: 28px;
    }

    #yield-calculator-page .yield-page-header h1 {
        font-size: clamp(2.1rem, 10vw, 2.65rem);
    }

    #yield-calculator-page .yield-page-header p {
        max-width: 34ch;
        font-size: 0.87rem;
    }

    #yield-calculator-page .yield-protocol-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-inline: 0;
        padding-inline: 0;
        scroll-padding-inline: 0;
    }

    #yield-calculator-page .yield-reference-results .yield-point-disclaimer {
        max-width: 100%;
        white-space: normal;
    }

    #yield-calculator-page .yield-reference-inputs,
    #yield-calculator-page .yield-reference-results {
        padding-block: 28px;
    }

    #yield-calculator-page .yield-reference-field-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    #yield-calculator-page .yield-fdv-unit-switch {
        grid-template-columns: repeat(2, 46px);
    }

    #yield-calculator-page .yield-point-actions {
        grid-template-columns: minmax(112px, 0.4fr) minmax(160px, 0.6fr);
    }

    #yield-calculator-page .yield-result-summary {
        min-height: 150px;
    }

    #yield-calculator-page .yield-result-summary > strong {
        font-size: clamp(3rem, 17vw, 4.2rem);
    }

    #yield-calculator-page .yield-reference-primary-results > div {
        padding-inline-end: 12px;
    }

    #yield-calculator-page .yield-reference-primary-results > div + div {
        padding-inline-start: 18px;
    }

    #yield-calculator-page .yield-reference-ledger > div {
        min-height: 58px;
        gap: 12px;
    }

    #yield-calculator-page .yield-reference-ledger dt,
    #yield-calculator-page .yield-reference-ledger dd {
        font-size: 0.78rem;
    }
}

/* Yield Calculator: points and stable-strategy income views. */
#yield-calculator-page .yield-primary-tabs {
    display: flex;
    align-items: end;
    gap: clamp(24px, 3vw, 42px);
    margin-block-start: 30px;
    border-block-end: var(--rule-yield) solid var(--color-yield-rule-strong);
}

#yield-calculator-page .yield-primary-tabs button {
    position: relative;
    min-height: 48px;
    padding: 0 0 14px;
    border: 0;
    background: transparent;
    color: var(--color-yield-muted);
    font-family: var(--font-yield-display);
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

#yield-calculator-page .yield-primary-tabs button::after {
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    background: var(--color-yield-accent);
    content: '';
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 180ms ease-out;
}

#yield-calculator-page .yield-primary-tabs button.is-active {
    color: var(--color-yield-ink);
}

#yield-calculator-page .yield-primary-tabs button.is-active::after {
    transform: scaleX(1);
}

#yield-calculator-page .yield-primary-tabs button:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--color-yield-focus);
    outline-offset: 3px;
}

#yield-calculator-page .yield-primary-tabs + .yield-calculator-card {
    border-block-start: 0;
}

#yield-calculator-page [data-yield-primary-panel][hidden] {
    display: none !important;
}

#yield-calculator-page .yield-income-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

#yield-calculator-page .yield-income-inputs,
#yield-calculator-page .yield-income-results {
    min-width: 0;
    padding-block: 38px 34px;
}

#yield-calculator-page .yield-income-inputs {
    padding-inline-end: clamp(28px, 4vw, 54px);
    border-inline-end: var(--rule-yield) solid var(--color-yield-rule-strong);
}

#yield-calculator-page .yield-income-results {
    padding-inline-start: clamp(28px, 4vw, 54px);
}

#yield-calculator-page .yield-income-strategy {
    margin-block-start: 28px;
    border-block: var(--rule-yield) solid var(--color-yield-rule-strong);
}

#yield-calculator-page .yield-income-strategy > header {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

#yield-calculator-page .yield-income-strategy > header > div {
    min-width: 0;
}

#yield-calculator-page .yield-income-strategy > header span,
#yield-calculator-page .yield-income-strategy > header strong {
    display: block;
}

#yield-calculator-page .yield-income-strategy > header span {
    color: var(--color-yield-muted);
    font-size: 0.72rem;
}

#yield-calculator-page .yield-income-strategy > header strong {
    margin-block-start: 5px;
    color: var(--color-yield-ink);
    font-size: 0.8rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

#yield-calculator-page #yield-income-retry {
    min-width: 74px;
    min-height: 44px;
    padding-inline: 14px;
    border: var(--rule-yield) solid var(--color-yield-accent);
    background: transparent;
    color: var(--color-yield-accent-hover);
    font: 800 0.72rem var(--font-yield-display);
    cursor: pointer;
}

#yield-calculator-page .yield-income-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding-block: 18px;
    border-block-start: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-income-leg,
#yield-calculator-page .yield-income-token {
    min-width: 0;
}

#yield-calculator-page .yield-income-leg > span,
#yield-calculator-page .yield-income-token > span {
    display: block;
    margin-block-end: 7px;
    color: var(--color-yield-muted);
    font: 700 0.62rem var(--font-yield-data);
    letter-spacing: 0.08em;
}

#yield-calculator-page .yield-income-leg > strong {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-yield-ink);
}

#yield-calculator-page .yield-income-leg > strong b {
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-yield-display);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#yield-calculator-page .yield-income-leg i {
    display: inline-flex;
    flex: 0 0 auto;
    font-style: normal;
}

#yield-calculator-page .yield-income-leg .ex-logo {
    width: 22px;
    height: 22px;
}

#yield-calculator-page .yield-income-leg--long > span {
    color: var(--color-yield-positive);
}

#yield-calculator-page .yield-income-leg--short {
    text-align: end;
}

#yield-calculator-page .yield-income-leg--short > span {
    color: var(--color-yield-negative);
}

#yield-calculator-page .yield-income-leg--short > strong {
    justify-content: flex-end;
}

#yield-calculator-page .yield-income-token {
    text-align: center;
}

#yield-calculator-page .yield-income-token strong {
    color: var(--color-yield-ink);
    font: 800 0.88rem var(--font-yield-data);
}

#yield-calculator-page .yield-income-strategy-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border-block-start: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-income-strategy-meta > div {
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

#yield-calculator-page .yield-income-strategy-meta > div + div {
    padding-inline-start: 18px;
    border-inline-start: var(--rule-yield) solid var(--color-yield-rule);
}

#yield-calculator-page .yield-income-strategy-meta dt {
    color: var(--color-yield-muted);
    font-size: 0.7rem;
}

#yield-calculator-page .yield-income-strategy-meta dd {
    margin: 0;
    color: var(--color-yield-ink);
    font: 800 0.78rem var(--font-yield-data);
    text-align: end;
}

#yield-calculator-page .yield-income-summary {
    min-height: 170px;
}

#yield-calculator-page .yield-income-summary > span {
    display: block;
    color: var(--color-yield-accent-hover);
    font-size: 0.8rem;
    font-weight: 800;
}

#yield-calculator-page .yield-income-summary > strong {
    display: block;
    margin-block-start: 16px;
    color: var(--color-yield-ink);
    font-family: var(--font-yield-display);
    font-size: clamp(3.2rem, 6.2vw, 5.8rem);
    font-weight: 800;
    line-height: 0.88;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

#yield-calculator-page .yield-income-summary[data-tone="positive"] > strong {
    color: var(--color-yield-positive);
}

#yield-calculator-page .yield-income-summary > p {
    margin-block-start: 16px;
    color: var(--color-yield-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

#yield-calculator-page .yield-income-leverage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block: 22px 0;
    border-block: var(--rule-yield) solid var(--color-yield-rule-strong);
}

#yield-calculator-page .yield-income-leverage-grid > div {
    min-width: 0;
    padding: 22px 20px 22px 0;
}

#yield-calculator-page .yield-income-leverage-grid > div + div {
    padding-inline: 28px 0;
    border-inline-start: var(--rule-yield) solid var(--color-yield-rule-strong);
}

#yield-calculator-page .yield-income-leverage-grid span,
#yield-calculator-page .yield-income-leverage-grid strong {
    display: block;
}

#yield-calculator-page .yield-income-leverage-grid span {
    color: var(--color-yield-muted);
    font-size: 0.78rem;
}

#yield-calculator-page .yield-income-leverage-grid strong {
    margin-block-start: 8px;
    color: var(--color-yield-positive);
    font: 800 clamp(1.25rem, 2vw, 1.65rem) var(--font-yield-data);
    overflow-wrap: anywhere;
}

#yield-calculator-page .yield-income-results .yield-point-disclaimer {
    width: auto;
    max-width: 72ch;
    margin: 26px 0 0;
    padding: 0;
    color: var(--color-yield-muted);
    font-size: 0.7rem;
    line-height: 1.55;
    text-align: start;
}

@media (hover: hover) and (pointer: fine) {
    #yield-calculator-page .yield-primary-tabs button:not(.is-active):hover {
        color: var(--color-yield-ink-soft);
    }

    #yield-calculator-page #yield-income-retry:hover {
        background: var(--color-yield-accent-quiet);
    }
}

@media (max-width: 70rem) {
    #yield-calculator-page .yield-income-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    #yield-calculator-page .yield-income-inputs {
        padding-inline-end: 0;
        border-inline-end: 0;
    }

    #yield-calculator-page .yield-income-results {
        padding: 34px 0 38px;
        border-block-start: var(--rule-yield) solid var(--color-yield-rule-strong);
    }
}

@media (max-width: 39.99rem) {
    #yield-calculator-page .yield-primary-tabs {
        gap: 24px;
        margin-block-start: 24px;
        overflow-x: auto;
    }

    #yield-calculator-page .yield-primary-tabs button {
        flex: 0 0 auto;
        font-size: 0.8rem;
    }

    #yield-calculator-page .yield-income-inputs,
    #yield-calculator-page .yield-income-results {
        padding-block: 28px;
    }

    #yield-calculator-page .yield-income-pair {
        grid-template-columns: minmax(0, 1fr) minmax(54px, auto) minmax(0, 1fr);
        gap: 8px;
    }

    #yield-calculator-page .yield-income-leg > strong b {
        font-size: 0.76rem;
    }

    #yield-calculator-page .yield-income-strategy-meta > div {
        display: block;
        padding-block: 12px;
    }

    #yield-calculator-page .yield-income-strategy-meta dt {
        margin-block-end: 5px;
    }

    #yield-calculator-page .yield-income-strategy-meta dd {
        text-align: start;
    }

    #yield-calculator-page .yield-income-summary > strong {
        font-size: clamp(3rem, 17vw, 4.2rem);
    }

    #yield-calculator-page .yield-income-leverage-grid > div {
        padding-inline-end: 12px;
    }

    #yield-calculator-page .yield-income-leverage-grid > div + div {
        padding-inline-start: 18px;
    }
}

/* Yield Calculator: align form controls with the backtest control language. */
#yield-calculator-page .yield-reference-inputs {
    --yield-backtest-control-height: 52px;
}

#yield-calculator-page .yield-fdv-control {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
}

#yield-calculator-page .yield-point-input-wrap {
    min-height: var(--yield-backtest-control-height);
    height: var(--yield-backtest-control-height);
    max-height: var(--yield-backtest-control-height);
    gap: 0;
    padding-inline: 0;
    overflow: hidden;
    border: 1px solid var(--border-primary);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.025);
    box-shadow: none;
}

#yield-calculator-page .yield-point-input-wrap:focus-within {
    border-color: var(--border-secondary);
    outline-color: transparent;
    box-shadow: none;
}

#yield-calculator-page .yield-point-input-wrap input {
    height: calc(var(--yield-backtest-control-height) - 2px);
    padding-inline: 12px;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 700;
    text-align: center;
}

#yield-calculator-page .yield-point-input-wrap > span {
    width: 64px;
    flex: 0 0 64px;
    box-sizing: border-box;
    align-self: stretch;
    display: grid;
    place-items: center;
    padding: 0;
    border-inline-end: 1px solid var(--border-primary);
    color: var(--text-tertiary);
    font-family: var(--font-yield-data);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

#yield-calculator-page .yield-point-input-wrap--suffixed > span {
    padding: 0;
    border-inline-start: 1px solid var(--border-primary);
    border-inline-end: 0;
}

#yield-calculator-page .yield-point-input-wrap--prefixed input {
    padding-inline: 12px;
}

#yield-calculator-page .yield-fdv-control .yield-point-input-wrap {
    border-inline-end: 0;
}

#yield-calculator-page .yield-fdv-unit-switch {
    grid-template-columns: repeat(2, 58px);
    min-height: var(--yield-backtest-control-height);
    border: 1px solid var(--border-primary);
    background: rgba(255, 255, 255, 0.025);
}

#yield-calculator-page .yield-fdv-unit-switch button {
    position: relative;
    min-height: calc(var(--yield-backtest-control-height) - 2px);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

#yield-calculator-page .yield-fdv-unit-switch button + button {
    border-inline-start: 1px solid var(--border-primary);
}

#yield-calculator-page .yield-fdv-unit-switch button.is-active {
    background: var(--bg-active);
    color: var(--text-primary);
    box-shadow: inset 0 -2px 0 var(--accent);
}

#yield-calculator-page .yield-field-label-row button {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-primary);
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.65rem;
    letter-spacing: 0.02em;
}

#yield-calculator-page .yield-field-label-row button[data-state="success"] {
    border-color: var(--positive-dim);
    color: var(--positive);
}

#yield-calculator-page .yield-point-actions {
    gap: 10px;
}

#yield-calculator-page .yield-point-actions .yield-share-trigger,
#yield-calculator-page .yield-point-actions .yield-open-protocol {
    min-height: 50px;
    height: 50px;
    border-radius: 0;
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

#yield-calculator-page .yield-point-actions .yield-share-trigger {
    border-color: var(--border-primary);
    background: transparent;
    color: var(--text-primary);
    gap: 5px;
    font-size: 0.66rem;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

#yield-calculator-page .yield-point-actions .yield-share-trigger .x-icon {
    display: block;
    width: 14px;
    height: 14px;
    fill: currentColor;
    stroke: none;
    transform: translateY(-2px);
}

#yield-calculator-page .yield-point-actions .yield-open-protocol {
    border-color: var(--border-primary);
    background: transparent;
    color: var(--text-primary);
}

@media (hover: hover) and (pointer: fine) {
    #yield-calculator-page .yield-fdv-unit-switch button:not(.is-active):hover,
    #yield-calculator-page .yield-field-label-row button:hover,
    #yield-calculator-page .yield-point-actions .yield-share-trigger:hover {
        border-color: var(--border-secondary);
        background: var(--bg-hover);
        color: var(--text-primary);
    }

    #yield-calculator-page .yield-point-actions .yield-open-protocol:hover {
        border-color: var(--border-secondary);
        background: var(--bg-hover);
        color: var(--text-primary);
    }
}

@media (max-width: 39.99rem) {
    #yield-calculator-page .yield-fdv-unit-switch {
        grid-template-columns: repeat(2, 48px);
    }

    #yield-calculator-page .yield-point-input-wrap > span {
        width: 48px;
    }
}

/* Final vertical alignment: keep the calculator close to the global navigation while
   preserving its established section rhythm. */
#yield-calculator-page .yield-shell {
    padding-top: clamp(18px, 2.5vw, 34px);
}

@media (max-width: 39.99rem) {
    #yield-calculator-page .yield-shell {
        padding-top: 24px;
    }
}

/* Yield Calculator finishes with its content instead of inheriting the page's
   legacy 80px footer gap on top of the shell's own bottom padding. */
#main-content:has(#yield-calculator-page:not([style*="display: none"])) {
    padding-bottom: 0;
}

#yield-calculator-page {
    min-height: 0;
}

#yield-calculator-page .yield-shell {
    padding-bottom: 20px;
}

/* Header balance: three equal navigation cells keep the middle tab on the
   content axis, while the logo and language control occupy independent edges. */
@media (min-width: 769px) {
    .header-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 420px minmax(0, 1fr);
        align-items: center;
    }

    .header-left,
    .header-center,
    .header-right {
        width: 100%;
        min-width: 0;
    }

    .header-left {
        justify-self: start;
    }

    .header-center {
        justify-self: center;
    }

    .header-right {
        justify-self: end;
    }

    .header-nav {
        width: auto !important;
        gap: 16px !important;
    }

    .header-nav .nav-link {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        padding-inline: 8px !important;
    }
}

@media (max-width: 768px) {
    .header-container {
        display: flex;
        justify-content: flex-start;
        gap: 8px;
        padding-inline: 12px;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .header-container::-webkit-scrollbar {
        display: none;
    }

    .header-left,
    .header-center,
    .header-right {
        flex: 0 0 auto;
    }
}

/* Historical spread chart watermark: deliberately quiet and kept beneath the
   plotted series so the brand never competes with data or hover tooltips. */
:is(#strategy-chart-container, #backtest-spread-chart-container) {
    isolation: isolate;
}

:is(#strategy-chart-container, #backtest-spread-chart-container)::before {
    content: 'FOMOHUB.CC';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    transform: translate(-50%, -50%);
    color: rgba(244, 244, 244, 0.055);
    font-family: var(--font-sans);
    font-size: clamp(1.75rem, 4.2vw, 4.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}

:is(#strategy-chart-container, #backtest-spread-chart-container) > canvas {
    position: relative;
    z-index: 1;
}

/* Language selector: centre the label and chevron as one optically balanced unit. */
.language-trigger-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(2px);
}

.language-trigger-content > svg {
    display: block;
}