/* ============================================
   TECHNE PROTOCOL - Full UI System
   Greek Gaming Aesthetic + Modern DeFi
   ============================================ */

/* ===========================================
   DESIGN TOKENS
   =========================================== */
:root {
    /* Core Colors */
    --bg-void: #06060a;
    --bg-deep: #0a0a10;
    --bg-surface: #0f0f18;
    --bg-elevated: #151520;
    --bg-elevated-2: #1a1a28;
    --bg-hover: #1f1f30;

    /* Gold System (Greek) */
    --gold: #d4a853;
    --gold-bright: #f0c060;
    --gold-dim: #a07830;
    --gold-glow: rgba(212, 168, 83, 0.25);
    --gold-subtle: rgba(212, 168, 83, 0.08);

    /* Status Colors */
    --success: #22c55e;
    --success-dim: rgba(34, 197, 94, 0.15);
    --warning: #eab308;
    --warning-dim: rgba(234, 179, 8, 0.15);
    --danger: #ef4444;
    --danger-dim: rgba(239, 68, 68, 0.15);
    --info: #3b82f6;
    --info-dim: rgba(59, 130, 246, 0.15);

    /* Text */
    --text: #f0f0f5;
    --text-secondary: #a0a0b5;
    --text-muted: #606075;

    /* Borders */
    --border: #252535;
    --border-gold: rgba(212, 168, 83, 0.25);

    /* Gradients */
    --gradient-gold: linear-gradient(135deg, #d4a853, #a07830);
    --gradient-surface: linear-gradient(180deg, var(--bg-elevated), var(--bg-surface));

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-gold: 0 4px 30px rgba(212, 168, 83, 0.2);

    /* Typography */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Outfit', 'Inter', sans-serif;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 14px;
    background: var(--bg-void);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* Top gold bar */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-gold);
    z-index: 10000;
}

img {
    display: block;
    max-width: 100%;
}

button {
    font-family: inherit;
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ===========================================
   APP LAYOUT
   =========================================== */
.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ===========================================
   HEADER
   =========================================== */
.header {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-6);
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 2px;
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.logo-icon {
    font-size: 1.5rem;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.logo-text .accent {
    color: var(--gold);
}

/* Main Navigation */
.main-nav {
    display: flex;
    gap: var(--space-1);
    flex: 1;
    justify-content: center;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: var(--transition-base);
}

.nav-item:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.nav-item.active {
    color: var(--gold);
    background: var(--gold-subtle);
}

.nav-icon {
    font-size: 1rem;
}

/* Header Right */
.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Credits Balance Widget */
.credits-balance {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.15), rgba(212, 168, 83, 0.05));
    border: 1px solid rgba(212, 168, 83, 0.4);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-base);
}

.credits-balance:hover {
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.25), rgba(212, 168, 83, 0.1));
    border-color: var(--gold);
    transform: translateY(-1px);
}

.credits-balance-icon,
.credits-omega-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.credits-amount {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--gold);
}

.credits-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* History Button */
.btn-history {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-base);
}

.btn-history:hover {
    border-color: var(--gold);
    color: var(--text);
}

.btn-network {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.875rem;
}

.btn-network:hover {
    border-color: var(--gold);
}

.network-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.btn-connect {
    padding: var(--space-2) var(--space-4);
    background: var(--gradient-gold);
    border: none;
    border-radius: var(--radius-md);
    color: var(--bg-void);
    font-weight: 600;
    font-size: 0.875rem;
    transition: var(--transition-base);
}

.btn-connect:hover {
    box-shadow: var(--shadow-gold);
    transform: translateY(-1px);
}

/* ===========================================
   MAIN CONTENT
   =========================================== */
.main-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    flex: 1;
    min-height: 0;
}

/* ===========================================
   SIDEBAR
   =========================================== */
.sidebar {
    background: var(--bg-deep);
    border-right: 1px solid var(--border);
    padding: var(--space-4);
    overflow-y: auto;
    max-height: calc(100vh - 60px);
    position: sticky;
    top: 62px;
}

/* Hide sidebar on non-explore sections */
body.section-portfolio .sidebar,
body.section-strategies .sidebar,
body.section-build .sidebar,
body.section-dao .sidebar,
body.section-vaults .sidebar,
body.section-verify .sidebar {
    display: none !important;
}

/* Full width content when sidebar hidden */
body.section-portfolio .main-content,
body.section-strategies .main-content,
body.section-build .main-content,
body.section-dao .main-content,
body.section-vaults .main-content,
body.section-verify .main-content {
    grid-template-columns: 1fr !important;
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

/* Agent Panel */
.agent-panel {
    background: linear-gradient(135deg, var(--gold-subtle), transparent);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.agent-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.agent-pulse {
    width: 8px;
    height: 8px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }

    50% {
        opacity: 0.7;
        box-shadow: 0 0 0 6px transparent;
    }
}

.agent-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--gold);
}

.agent-status {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.agent-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}

.agent-name {
    color: var(--text-secondary);
}

.agent-state {
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.agent-state.active {
    background: var(--success-dim);
    color: var(--success);
}

/* Filters Section */
.filters-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-2);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.filter-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.filter-value {
    color: var(--gold);
    font-weight: 600;
}

/* Chain Selector */
.chain-selector {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
}

.chain-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: var(--transition-base);
}

.chain-btn img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.chain-btn:hover {
    border-color: var(--gold);
}

.chain-btn.active {
    border-color: var(--gold);
    background: var(--gold-subtle);
}

/* NEW Chain Selector with Labels */
.chain-selector-new {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chain-btn-new {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 50px;
}

.chain-btn-new .chain-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.chain-btn-new img.chain-icon {
    object-fit: cover;
}

.chain-btn-new .chain-name {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.chain-btn-new:hover {
    border-color: var(--gold);
    background: var(--bg-hover);
}

.chain-btn-new:hover .chain-name {
    color: var(--text);
}

.chain-btn-new.active {
    border-color: var(--gold);
    background: var(--gold-subtle);
}

.chain-btn-new.active .chain-name {
    color: var(--gold);
    font-weight: 600;
}

/* More Dropdown */
.chain-more-dropdown {
    position: relative;
}

.chain-dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px;
    z-index: 100;
    min-width: 120px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.chain-dropdown-content.show {
    display: block;
}

.chain-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--text);
    font-size: 0.8rem;
    transition: background 0.15s ease;
}

.chain-dropdown-item img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.chain-dropdown-item:hover {
    background: var(--bg-hover);
}

.chain-dropdown-item.active {
    background: var(--gold-subtle);
    color: var(--gold);
}

/* Range Slider */
.range-slider {
    width: 100%;
    height: 4px;
    background: var(--bg-surface);
    border-radius: 2px;
    appearance: none;
    cursor: pointer;
}

.range-slider::-webkit-slider-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--gold);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Risk Selector */
.risk-selector {
    display: flex;
    gap: var(--space-1);
}

.risk-btn {
    flex: 1;
    padding: var(--space-2);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: var(--transition-base);
}

.risk-btn:hover {
    border-color: var(--gold);
    color: var(--text);
}

.risk-btn.active {
    background: var(--gold-subtle);
    border-color: var(--gold);
    color: var(--gold);
}

/* Protocol Grid */
.protocol-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
}

.protocol-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-base);
    font-size: 0.75rem;
}

.protocol-item:hover {
    border-color: var(--gold);
}

.protocol-item img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.protocol-item input[type="checkbox"] {
    display: none;
}

.protocol-item:has(input:checked) {
    border-color: var(--gold);
    background: var(--gold-subtle);
}

.protocol-item.airdrop {
    position: relative;
}

.airdrop-tag {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 0.6rem;
}

/* More Protocols */
.more-protocols {
    margin-top: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.more-protocols summary {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--text-muted);
    list-style: none;
}

.more-protocols summary::-webkit-details-marker {
    display: none;
}

.more-protocols[open] summary {
    border-bottom: 1px solid var(--border);
}

.more-protocols .protocol-grid {
    padding: var(--space-2);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* Buttons */
.btn-all {
    padding: 2px 6px;
    background: var(--gradient-gold);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--bg-void);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* ===========================================
   CONTENT AREA
   =========================================== */
.content-area {
    padding: var(--space-6);
    background: var(--bg-void);
    overflow-y: auto;
}

/* Sections */
.section {
    display: none;
}

.section.active {
    display: block;
}

.section-header {
    margin-bottom: var(--space-6);
}

.section-header h1 {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--space-1);
}

.section-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pool-count {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* View Toggles */
.view-toggles {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.view-btn {
    padding: var(--space-1) var(--space-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    transition: var(--transition-base);
}

.view-btn.active {
    background: var(--gold-subtle);
    border-color: var(--gold);
    color: var(--gold);
}

/* Stats Bar */
.stats-bar {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.stat-item .stat-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gold);
}

.stat-item .stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Pool Grid */
.pool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}

.loading-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    color: var(--text-muted);
}

.loader {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: var(--space-4);
}

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

/* ===========================================
   VAULT CARDS
   =========================================== */
.vault-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.vault-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: var(--transition-base);
}

.vault-card:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: var(--shadow-gold);
}

.vault-card.featured {
    border-color: var(--border-gold);
}

.vault-card .vault-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: linear-gradient(135deg, var(--gold-subtle), transparent);
}

.vault-tier {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gold);
}

.vault-apy {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.vault-body {
    padding: var(--space-4);
}

.vault-body h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin-bottom: var(--space-2);
}

.vault-body p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
}

.vault-protocols {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}

.vault-protocols img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--bg-void);
    margin-left: -8px;
}

.vault-protocols img:first-child {
    margin-left: 0;
}

.vault-stats {
    display: flex;
    gap: var(--space-4);
}

.vault-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vault-stat .stat-value {
    font-weight: 600;
    font-size: 0.9rem;
}

.vault-stat .stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.vault-actions {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-4);
    border-top: 1px solid var(--border);
}

.btn-deposit,
.btn-details {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    transition: var(--transition-base);
}

.btn-deposit {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-deposit:hover {
    border-color: var(--gold);
}

.btn-deposit.primary {
    background: var(--gradient-gold);
    border: none;
    color: var(--bg-void);
}

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

/* Vault Tier Colors */
.tier-conservative .vault-header {
    background: linear-gradient(135deg, var(--success-dim), transparent);
}

.tier-conservative .vault-tier {
    color: var(--success);
}

.tier-balanced .vault-header {
    background: linear-gradient(135deg, var(--gold-subtle), transparent);
}

.tier-aggressive .vault-header {
    background: linear-gradient(135deg, var(--danger-dim), transparent);
}

.tier-aggressive .vault-tier {
    color: var(--danger);
}

.tier-airdrop .vault-header {
    background: linear-gradient(135deg, var(--warning-dim), transparent);
}

.tier-airdrop .vault-tier {
    color: var(--warning);
}

/* ===========================================
   STRATEGY SECTION
   =========================================== */
.strategy-tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.tab-btn {
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    transition: var(--transition-base);
}

.tab-btn:hover {
    border-color: var(--gold);
    color: var(--text);
}

.tab-btn.active {
    background: var(--gold-subtle);
    border-color: var(--gold);
    color: var(--gold);
}

/* ============================================
   VERIFY POOLS SECTION - MATRIX GOLD THEME
   ============================================ */

#section-verify {
    max-width: 900px;
    margin: 0 auto;
}

/* ====================================================
   Verify Pool - Professional Matrix Gold Redesign
   ==================================================== */

/* Main Container */
.verify-container {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.95), rgba(10, 10, 10, 0.98));
    border: 1px solid rgba(212, 168, 83, 0.2);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 0 40px rgba(212, 168, 83, 0.05);
}

/* Header with gradient badge */
.verify-header {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(212, 168, 83, 0.15);
}

.verify-header-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

.verify-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.verify-icon-badge {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.15), rgba(212, 168, 83, 0.03));
    border: 1px solid rgba(212, 168, 83, 0.35);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: 1.4rem;
}

.verify-main-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    background: linear-gradient(135deg, #fff, #ccc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.verify-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 6px 0 0 0;
}

/* Data Source Status Bar */
.data-source-status {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    font-size: 0.75rem;
    transition: all 0.2s;
}

.status-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #888;
}

.status-item.status-online .status-dot {
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
    animation: vfy-pulse 2s ease-in-out infinite;
}

.status-item.status-offline .status-dot {
    background: #ef4444;
}

@keyframes vfy-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.status-icon {
    font-size: 0.9rem;
}

.status-label {
    color: var(--text-secondary);
    font-weight: 500;
}

.status-chain-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
}

/* Verify Input Card */
.verify-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 24px;
}

.verify-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.card-badge {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gold);
}

.card-cost {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--gold);
    background: rgba(212, 168, 83, 0.1);
    border: 1px solid rgba(212, 168, 83, 0.35);
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 600;
}

.credits-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.verify-input-row {
    display: flex;
    gap: 12px;
}

.input-with-icon {
    flex: 1;
    position: relative;
}

.input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    opacity: 0.4;
}

.verify-input-pro {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 20px 16px 50px;
    color: var(--text);
    font-size: 0.95rem;
    transition: all 0.2s;
}

.verify-input-pro:focus {
    outline: none;
    border-color: rgba(212, 168, 83, 0.5);
    box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.1);
    background: rgba(0, 0, 0, 0.5);
}

.verify-input-pro::placeholder {
    color: var(--text-muted);
}

.btn-verify-pro {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #D4A853, #C49A47);
    color: #000;
    border: none;
    border-radius: 12px;
    padding: 0 32px;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 140px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-verify-pro .btn-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-verify-pro:hover {
    background: linear-gradient(135deg, #E5B95F, #D4A853);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 168, 83, 0.3);
}

.btn-verify-pro:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.verify-supported {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.supported-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-right: 4px;
}

.supported-tag {
    font-size: 0.68rem;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.supported-tag:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(212, 168, 83, 0.3);
    color: var(--gold);
}

/* History Section */
.verify-history-section {
    margin-top: 24px;
}

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

.history-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

.history-title svg {
    color: var(--gold);
    opacity: 0.6;
}

.history-clear-btn {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 8px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.history-clear-btn:hover {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
}

.verify-history-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
}

/* Empty State Pro */
.empty-state-pro {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
}

.empty-state-pro .empty-icon {
    color: var(--gold);
    opacity: 0.3;
    margin-bottom: var(--space-4);
}

.empty-state-pro h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0;
}

.empty-state-pro p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

/* Responsive */
@media (max-width: 1200px) {
    .verify-history-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .verify-history-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .verify-header-content {
        flex-direction: column;
    }

    .data-source-status {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .verify-history-grid {
        grid-template-columns: 1fr;
    }

    .verify-input-row {
        flex-direction: column;
    }

    .btn-verify-pro {
        width: 100%;
        padding: 14px;
    }
}

.verify-history-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    cursor: pointer;
    transition: var(--transition-base);
}

.verify-history-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
}

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

.verify-pool-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.verify-pool-apy {
    font-weight: 700;
    font-size: 0.95rem;
}

.verify-pool-apy.positive {
    color: var(--success);
}

.verify-card-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.verify-card-meta span {
    margin-right: 4px;
}

.verify-card-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.verify-tvl {
    color: var(--gold);
    font-weight: 600;
}

.strategy-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
}

@media (max-width: 1200px) {
    .strategy-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

@media (max-width: 600px) {
    .strategy-list {
        grid-template-columns: 1fr;
    }
}

.strategy-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: var(--transition-base);
}

.strategy-card:hover {
    border-color: var(--gold);
}

.strategy-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-2);
}

.strategy-info h3 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.strategy-info .creator {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.strategy-perf {
    text-align: right;
}

.perf-value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
}

.perf-value.positive {
    color: var(--success);
}

.perf-value.negative {
    color: var(--danger);
}

.perf-period {
    font-size: 0.65rem;
    color: var(--text-muted);
    display: block;
}

.strategy-desc {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin-bottom: var(--space-2);
    line-height: 1.4;
}

.strategy-meta {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.meta-item img {
    border-radius: 50%;
    margin-left: -6px;
}

.meta-item img:first-child {
    margin-left: 0;
}

.strategy-actions {
    display: flex;
    gap: var(--space-2);
}

.btn-copy,
.btn-view {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    font-weight: 600;
    transition: var(--transition-base);
}

.btn-copy {
    background: var(--gradient-gold);
    border: none;
    color: var(--bg-void);
}

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

/* ===========================================
   BUILDER SECTION
   =========================================== */
.builder-container {
    display: grid;
    grid-template-columns: 200px 1fr 240px;
    gap: var(--space-4);
    height: 500px;
    margin-bottom: var(--space-4);
}

.builder-sidebar,
.builder-config {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.builder-sidebar h3,
.builder-config h3 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: var(--space-4);
}

.component-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.component-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: grab;
    font-size: 0.8rem;
    transition: var(--transition-base);
}

.component-item:hover {
    border-color: var(--gold);
}

.component-icon {
    font-size: 1rem;
}

.builder-canvas {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.canvas-empty {
    text-align: center;
    color: var(--text-muted);
}

.canvas-empty p {
    margin-bottom: var(--space-2);
}

.canvas-empty .hint {
    font-size: 0.75rem;
}

.config-hint {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.builder-actions {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
}

.btn-mode,
.btn-backtest,
.btn-deploy {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition-base);
}

.btn-mode,
.btn-backtest {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text);
}

.btn-deploy {
    background: var(--gradient-gold);
    border: none;
    color: var(--bg-void);
}

.btn-deploy.primary:hover {
    box-shadow: var(--shadow-gold);
}

/* ===========================================
   PORTFOLIO SECTION
   =========================================== */
.portfolio-summary {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.portfolio-value,
.portfolio-pnl {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.portfolio-value .label,
.portfolio-pnl .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.portfolio-value .value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
}

.portfolio-pnl .value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
}

.portfolio-pnl .value.positive {
    color: var(--success);
}

.portfolio-pnl .value.negative {
    color: var(--danger);
}

.portfolio-pnl .value.neutral {
    color: var(--text-muted);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    text-align: center;
}

.empty-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    opacity: 0.3;
}

.empty-state h3 {
    font-family: var(--font-display);
    margin-bottom: var(--space-2);
}

.empty-state p {
    color: var(--text-secondary);
    max-width: 400px;
    margin-bottom: var(--space-4);
}

.btn-explore {
    padding: var(--space-3) var(--space-5);
    background: var(--gradient-gold);
    border: none;
    border-radius: var(--radius-md);
    color: var(--bg-void);
    font-weight: 600;
}

/* ===========================================
   DAO SECTION
   =========================================== */
.dao-stats {
    display: flex;
    gap: var(--space-6);
    padding: var(--space-6);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
}

.dao-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.dao-stat .stat-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
}

.dao-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.proposals-section h3 {
    font-size: 1rem;
    margin-bottom: var(--space-4);
}

.proposal-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.proposal-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.proposal-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: var(--space-3);
}

.proposal-status.active {
    background: var(--success-dim);
    color: var(--success);
}

.proposal-card h4 {
    font-family: var(--font-display);
    margin-bottom: var(--space-2);
}

.proposal-card p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: var(--space-4);
}

.proposal-votes {
    margin-bottom: var(--space-4);
}

.vote-bar {
    height: 8px;
    background: var(--danger-dim);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.vote-for {
    height: 100%;
    background: var(--success);
    border-radius: 4px;
}

.vote-counts {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}

.vote-counts .for {
    color: var(--success);
}

.vote-counts .against {
    color: var(--danger);
}

.btn-vote {
    padding: var(--space-2) var(--space-4);
    background: var(--gradient-gold);
    border: none;
    border-radius: var(--radius-md);
    color: var(--bg-void);
    font-weight: 600;
    font-size: 0.8rem;
}

/* ===========================================
   FOOTER
   =========================================== */
.footer {
    background: var(--bg-deep);
    border-top: 1px solid var(--border);
    padding: var(--space-4) var(--space-6);
}

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

.footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
}

.footer-links {
    display: flex;
    gap: var(--space-4);
    font-size: 0.85rem;
    color: var(--text-muted);
}

.footer-links a:hover {
    color: var(--gold);
}

.footer-powered {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.footer-powered strong {
    color: var(--gold);
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 1200px) {
    .builder-container {
        grid-template-columns: 180px 1fr 200px;
    }
}

@media (max-width: 1024px) {
    .main-content {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .main-nav {
        display: none;
    }
}

@media (max-width: 768px) {
    .header {
        flex-wrap: wrap;
        gap: var(--space-3);
    }

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

    .builder-container {
        grid-template-columns: 1fr;
        height: auto;
    }

    .builder-canvas {
        min-height: 300px;
    }

    .stats-bar {
        flex-wrap: wrap;
    }
}

/* ===========================================
   UTILITIES
   =========================================== */
.hidden {
    display: none !important;
}

/* Protocol Icon Styling */
.protocol-icon {
    border-radius: 50%;
    object-fit: cover;
}

.protocol-icon-placeholder {
    background: var(--bg-elevated);
    border-radius: 50%;
}

/* ===========================================
   POOL CARDS
   =========================================== */
.pool-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: var(--transition-base);
}

.pool-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

.pool-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.pool-protocol {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pool-protocol .protocol-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.pool-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pool-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.pool-pair {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.pool-chain .chain-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.pool-stats {
    display: flex;
    justify-content: space-between;
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.pool-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.pool-stat .stat-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
}

.pool-stat .stat-value.apy {
    color: var(--gold);
}

.pool-stat .stat-value.risk-low {
    color: var(--success);
}

.pool-stat .stat-value.risk-medium {
    color: var(--warning);
}

.pool-stat .stat-value.risk-high {
    color: var(--danger);
}

.pool-stat .stat-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.pool-badges {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    min-height: 24px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    font-weight: 600;
}

.badge.airdrop {
    background: var(--warning-dim);
    color: var(--warning);
}

.badge.stable {
    background: var(--success-dim);
    color: var(--success);
}

.pool-actions {
    display: flex;
    gap: var(--space-2);
}

.pool-actions .btn-deposit {
    flex: 1;
    padding: var(--space-2);
    background: var(--gradient-gold);
    border: none;
    border-radius: var(--radius-md);
    color: var(--bg-void);
    font-weight: 600;
    font-size: 0.8rem;
    transition: var(--transition-base);
}

.pool-actions .btn-deposit:hover {
    box-shadow: var(--shadow-gold);
}

.pool-actions .btn-add-strategy {
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.8rem;
    transition: var(--transition-base);
}

.pool-actions .btn-add-strategy:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* Connected Button State */
.btn-connect.connected {
    background: var(--bg-surface);
    border: 1px solid var(--gold);
    color: var(--gold);
}

/* ===========================================
   MODALS
   =========================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-container {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.3s ease;
}

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

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

.modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 32px;
    height: 32px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-base);
}

.modal-close:hover {
    border-color: var(--gold);
    color: var(--text);
}

/* Deposit Modal */
.deposit-modal .modal-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5);
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--gold-subtle), transparent);
}

.modal-protocol-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.deposit-modal .modal-header h2 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin: 0;
}

.modal-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.deposit-info {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
}

.info-row .label {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.info-row .value {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.info-row .value.apy {
    color: var(--gold);
}

.deposit-form {
    padding: var(--space-5);
}

.form-label {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.input-with-token {
    display: flex;
    gap: var(--space-2);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.input-with-token input {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 600;
    outline: none;
}

.input-with-token input::placeholder {
    color: var(--text-muted);
}

.token-selector {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-surface);
    border: none;
    border-left: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
}

.token-selector:hover {
    background: var(--bg-hover);
}

.token-selector .arrow {
    font-size: 0.6rem;
    color: var(--text-muted);
}

.balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-2);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-max {
    padding: 2px 8px;
    background: var(--gold-subtle);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-sm);
    color: var(--gold);
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
}

.deposit-preview {
    padding: var(--space-4) var(--space-5);
    background: var(--bg-elevated);
    margin: 0 var(--space-5);
    border-radius: var(--radius-md);
}

.preview-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-1) 0;
    font-size: 0.85rem;
}

.preview-row .positive {
    color: var(--success);
    font-weight: 600;
}

.deposit-actions {
    padding: var(--space-5);
}

.btn-deposit-full {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--gradient-gold);
    border: none;
    border-radius: var(--radius-md);
    color: var(--bg-void);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-base);
}

.btn-deposit-full:hover {
    box-shadow: var(--shadow-gold);
    transform: translateY(-2px);
}

.deposit-disclaimer {
    padding: var(--space-4) var(--space-5);
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    border-top: 1px solid var(--border);
}

/* ===========================================
   STRATEGY BUILDER ENHANCED
   =========================================== */
.builder-canvas.drag-over {
    border-color: var(--gold);
    background: var(--gold-subtle);
}

.strategy-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-6);
}

.flow-node {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-elevated);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
    min-width: 200px;
}

.flow-node:hover {
    border-color: var(--gold);
}

.flow-node.selected {
    border-color: var(--gold);
    background: var(--gold-subtle);
}

.node-icon {
    font-size: 1.25rem;
}

.node-label {
    font-weight: 500;
}

.node-delete {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: var(--danger);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 0.7rem;
    cursor: pointer;
    opacity: 0;
    transition: var(--transition-base);
}

.flow-node:hover .node-delete {
    opacity: 1;
}

.flow-connector {
    color: var(--gold);
    font-size: 1.25rem;
}

/* Code Editor */
.code-editor {
    width: 100%;
    height: 100%;
    padding: var(--space-4);
}

.code-editor textarea {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: var(--bg-void);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    color: var(--text);
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    resize: none;
    outline: none;
}

.code-editor textarea:focus {
    border-color: var(--gold);
}

/* Config Fields */
.config-field {
    margin-bottom: var(--space-4);
}

.config-field label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.config-field input,
.config-field select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.85rem;
    outline: none;
}

.config-field input:focus,
.config-field select:focus {
    border-color: var(--gold);
}

.chain-checkboxes {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.chain-checkboxes label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8rem;
    color: var(--text);
    cursor: pointer;
}

/* ===========================================
   UNLOCK BUTTON
   =========================================== */
.unlock-cta {
    margin-left: auto;
}

.btn-unlock-pools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--gradient-gold);
    border: none;
    border-radius: var(--radius-md);
    color: var(--bg-void);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: var(--transition-base);
}

.btn-unlock-pools:hover {
    box-shadow: var(--shadow-gold);
    transform: translateY(-2px);
}

.unlock-price {
    background: rgba(0, 0, 0, 0.2);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
}

/* ===========================================
   LIST VIEW (Preview Mode)
   =========================================== */
.pool-grid.list-view {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pool-grid.list-view .pool-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
}

.pool-grid.list-view .pool-header {
    margin: 0;
    flex: 1;
}

.pool-grid.list-view .pool-stats {
    display: flex;
    gap: var(--space-6);
    margin: 0;
    background: none;
    padding: 0;
}

.pool-grid.list-view .pool-badges {
    margin: 0;
    min-height: auto;
}

.pool-grid.list-view .pool-actions {
    margin: 0;
}

/* View toggle active states */
.view-btn.active {
    background: var(--gold-subtle);
    border-color: var(--gold);
    color: var(--gold);
}

/* Component dragging */
.component-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

/* Pool chain with tooltip */
.pool-chain {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.pool-chain .chain-icon {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
}

.pool-chain .chain-name {
    display: none;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: capitalize;
}

.pool-chain:hover .chain-name {
    display: inline;
}

/* Verified pool card glow */
.pool-card.verified {
    border-color: var(--success);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.1);
}

.badge.verified {
    background: var(--success-dim);
    color: var(--success);
}

/* ============================================
   WIDE UNLOCK MODAL
   ============================================ */
.unlock-modal.wide {
    max-width: 900px;
    width: 95%;
}

.tx-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--gold);
    font-size: 0.8rem;
    text-decoration: none;
    margin-top: var(--space-3);
}

.tx-link:hover {
    border-color: var(--gold);
    background: var(--gold-subtle);
}

.verified-pools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--space-3);
}

.verified-pool-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 0.85rem;
}

.pool-header-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pool-header-row .protocol-icon {
    border-radius: var(--radius-md);
}

.pool-title {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pool-title .pool-name {
    font-weight: 600;
    font-size: 0.95rem;
}

.pool-title .pool-symbol {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.pool-title .pool-chain {
    font-size: 0.7rem;
    color: var(--gold);
    text-transform: uppercase;
}

.pool-apy-big {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold);
}

.verification-section {
    padding: var(--space-2) 0;
    border-top: 1px solid var(--border);
}

.verification-row {
    display: flex;
    gap: var(--space-3);
}

.verification-row .check {
    font-size: 0.8rem;
}

/* Risk Section */
.risk-section {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.risk-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.risk-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

.risk-badge {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.risk-badge.risk-low {
    background: var(--success-dim);
    color: var(--success);
}

.risk-badge.risk-medium {
    background: rgba(251, 191, 36, 0.15);
    color: #FBBF24;
}

.risk-badge.risk-high {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
}

.risk-notes,
.airdrop-notes {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.risk-notes .note,
.airdrop-notes .note {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Airdrop Section */
.airdrop-section {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.airdrop-section.has-airdrop {
    background: rgba(236, 72, 153, 0.08);
    border: 1px solid rgba(236, 72, 153, 0.2);
}

.airdrop-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.airdrop-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
}

.airdrop-badge {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.airdrop-badge.airdrop-high {
    background: rgba(236, 72, 153, 0.2);
    color: #EC4899;
}

.airdrop-badge.airdrop-medium {
    background: rgba(251, 191, 36, 0.15);
    color: #FBBF24;
}

.airdrop-badge.airdrop-none,
.airdrop-badge.airdrop-low {
    background: var(--bg-void);
    color: var(--text-muted);
}

/* Pool Footer */
.pool-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.pool-stats-mini {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.btn-deposit-pool {
    padding: var(--space-2) var(--space-4);
    background: var(--gradient-gold);
    border: none;
    border-radius: var(--radius-md);
    color: var(--bg-void);
    font-weight: 600;
    font-size: 0.8rem;
    text-decoration: none;
    cursor: pointer;
}

.btn-deposit-pool:hover {
    filter: brightness(1.1);
}

/* Stablecoin Type Filter */
.stablecoin-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.stable-btn {
    padding: var(--space-1) var(--space-2);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
}

.stable-btn:hover {
    border-color: var(--gold);
}

.stable-btn.active {
    background: var(--gold-subtle);
    border-color: var(--gold);
    color: var(--gold);
}

.stable-btn img {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin-right: 4px;
}

/* Asset Type Selector */
.asset-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.asset-btn {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
}

.asset-btn:hover {
    border-color: var(--gold);
}

.asset-btn.active {
    background: var(--gold-subtle);
    border-color: var(--gold);
    color: var(--gold);
}

/* Clickable pool cards */
.pool-card {
    cursor: pointer;
    transition: var(--transition-base);
}

.pool-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-color: var(--gold);
}

/* Custom input for filters */
.custom-input {
    width: 80px;
    padding: 4px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 0.75rem;
    text-align: right;
}

.custom-input:focus {
    outline: none;
    border-color: var(--gold);
}

.filter-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Range inputs (min-max) */
.range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.range-inputs .custom-input {
    flex: 1;
    width: auto;
}

.range-sep {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Premium Range Slider - Aave/Uniswap style */
.premium-slider {
    position: relative;
    height: 32px;
    margin: 12px 0 4px;
}

.slider-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    transform: translateY(-50%);
}

.slider-fill {
    position: absolute;
    top: 50%;
    height: 6px;
    background: linear-gradient(90deg, #D4AF37 0%, #F4E4BC 50%, #D4AF37 100%);
    border-radius: 3px;
    transform: translateY(-50%);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
    transition: left 0.1s ease, width 0.1s ease;
}

.premium-slider .slider-thumb {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.premium-slider .slider-thumb::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
}

.premium-slider .slider-thumb::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(145deg, #D4AF37 0%, #F4E4BC 100%);
    border: 3px solid #1a1a2e;
    border-radius: 50%;
    cursor: grab;
    pointer-events: auto;
    margin-top: -7px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 20px rgba(212, 175, 55, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.premium-slider .slider-thumb::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 30px rgba(212, 175, 55, 0.5);
}

.premium-slider .slider-thumb::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.2);
}

.premium-slider .thumb-max::-webkit-slider-thumb {
    background: linear-gradient(145deg, #F4E4BC 0%, #fff 100%);
}

/* Custom button */
.btn-custom {
    padding: 2px 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.65rem;
    cursor: pointer;
    transition: var(--transition-base);
}

.btn-custom:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* Custom range popup */
.custom-range-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-card);
    border: 1px solid var(--gold);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    z-index: 3000;
    min-width: 280px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.custom-range-popup h3 {
    margin: 0 0 var(--space-3);
    font-size: 1rem;
}

.custom-range-popup .inputs {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.custom-range-popup input {
    flex: 1;
    padding: var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.custom-range-popup .actions {
    display: flex;
    gap: var(--space-2);
}

.custom-range-popup button {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2999;
}

/* =============================================
   $1B PREMIUM UI ENHANCEMENTS
   ============================================= */

/* Premium Pool Cards - Glassmorphism */
.pools-grid .pool-card,
.pool-card {
    position: relative;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.8) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    cursor: pointer;
}

.pool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pool-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 60px rgba(212, 175, 55, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.pool-card:hover::before {
    opacity: 1;
}

/* APY Glow Effect - Static for performance */
.pool-card .apy,
.pool-apy,
.apy-value {
    background: linear-gradient(135deg, #D4AF37 0%, #F4E4BC 50%, #D4AF37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* High APY - static bold styling */
.pool-card[data-apy-high="true"] .apy,
.apy-high {
    font-weight: 900;
}

/* Risk Badge Styling - Narrow Rounded Pills */
.risk-badge,
.pool-risk {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: inline-block;
}

/* LOW - Dark green bg, light green text */
.risk-badge.low,
.risk-badge.safe,
.risk-low {
    background: #166534;
    color: #86efac;
}

/* MEDIUM - Dark yellow/amber bg, light yellow text */
.risk-badge.medium,
.risk-badge.moderate,
.risk-medium {
    background: #a16207;
    color: #fef08a;
}

/* HIGH - Dark red bg, light red text */
.risk-badge.high,
.risk-badge.elevated,
.risk-badge.extreme,
.risk-high {
    background: #991b1b;
    color: #fecaca;
}

/* Protocol Icon Shimmer Loading */
.protocol-icon,
.pool-icon {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.protocol-icon.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* Premium Buttons */
.btn-deposit,
.btn-primary,
.btn-unlock {
    position: relative;
    background: linear-gradient(135deg, #D4AF37 0%, #F4E4BC 30%, #D4AF37 100%);
    background-size: 200% 200%;
    color: #0f0f23;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
}

.btn-deposit:hover,
.btn-primary:hover,
.btn-unlock:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(212, 175, 55, 0.4);
}

.btn-deposit::after,
.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-deposit:active::after,
.btn-primary:active::after {
    width: 300px;
    height: 300px;
    opacity: 0;
}

/* Animated Stats Counter */
.stat-value,
.stats-value,
.metric-value {
    font-family: var(--font-display);
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, #D4AF37 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Stats Ticker Animation */
.stats-bar,
.stats-ticker {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.9) 100%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

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

    100% {
        background-position: -200% 0;
    }
}

/* Premium Modal Backdrop */
.modal-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.7);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-container {
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

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

/* Premium Toast Notifications */
.toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.9) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    animation: toastSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5000;
}

.toast.success {
    border-left: 4px solid #10b981;
}

.toast.error {
    border-left: 4px solid #ef4444;
}

@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

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

/* Quick Actions on Hover */
.pool-card .quick-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    display: flex;
    gap: 8px;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.pool-card:hover .quick-actions {
    opacity: 1;
    transform: translateY(0);
}

.quick-action-btn {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-action-btn:hover {
    background: var(--gold);
    color: #0f0f23;
    border-color: var(--gold);
}

/* Premium Network Badge */
.network-badge,
.btn-network {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.8) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.network-badge:hover,
.btn-network:hover {
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.2);
}

/* Premium Wallet Button */
.wallet-btn,
.btn-connect {
    background: linear-gradient(135deg, #D4AF37 0%, #F4E4BC 100%);
    color: #0f0f23;
    font-weight: 700;
    border: none;
    border-radius: 12px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.wallet-btn:hover,
.btn-connect:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

/* Pulse animation for live indicator */
.live-indicator,
.status-active {
    position: relative;
}

.live-indicator::before,
.status-active::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Premium Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #D4AF37 0%, #F4E4BC 100%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #F4E4BC 0%, #D4AF37 100%);
}

/* Focus States */
*:focus-visible {
    outline: 2px solid rgba(212, 175, 55, 0.6);
    outline-offset: 2px;
}

/* Selection Color */
::selection {
    background: rgba(212, 175, 55, 0.3);
    color: #fff;
}

/* =============================================
   AGENT BUILDER STYLES
   ============================================= */

.agent-builder {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 24px;
    min-height: 600px;
}

/* Config Panel */
.agent-config-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.config-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
}

.config-card h3 {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #fff;
}

.config-group {
    margin-bottom: 20px;
}

.config-group label {
    display: block;
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 10px;
    font-weight: 600;
}

/* Risk Selector */
.risk-selector {
    display: flex;
    gap: 8px;
}

.risk-option {
    flex: 1;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.risk-option .icon {
    font-size: 1.5rem;
}

.risk-option .label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
}

.risk-option .desc {
    font-size: 0.65rem;
    color: #666;
}

.risk-option:hover {
    border-color: rgba(212, 175, 55, 0.4);
    background: rgba(212, 175, 55, 0.1);
}

.risk-option.active {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.15);
}

.risk-option.active .label {
    color: var(--gold);
}

/* Duration Buttons */
.duration-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.duration-btn {
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #aaa;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.duration-btn:hover {
    border-color: rgba(212, 175, 55, 0.4);
}

.duration-btn.active {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}

/* Asset Chips */
.asset-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.asset-chip {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: #888;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.asset-chip:hover {
    border-color: rgba(212, 175, 55, 0.4);
}

.asset-chip.active {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}

/* Toggle Switch */
.toggle-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
}

.toggle-switch input {
    display: none;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 26px;
    cursor: pointer;
    transition: 0.3s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}

.toggle-switch input:checked+.toggle-slider {
    background: var(--gold);
}

.toggle-switch input:checked+.toggle-slider::before {
    transform: translateX(22px);
}

/* APY / Allocation Sliders */
.apy-slider,
.allocation-slider {
    display: flex;
    align-items: center;
    gap: 12px;
}

.apy-slider input,
.allocation-slider input {
    flex: 1;
    height: 6px;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.apy-slider input::-webkit-slider-thumb,
.allocation-slider input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: var(--gold);
    border-radius: 50%;
    cursor: pointer;
}

.apy-value,
.allocation-value {
    min-width: 45px;
    text-align: right;
    font-weight: 700;
    color: var(--gold);
}

/* Deploy Button */
.btn-deploy-agent {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #D4AF37 0%, #F4E4BC 100%);
    border: none;
    border-radius: 12px;
    color: #0f0f23;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-deploy-agent:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

/* Chat Panel */
.agent-chat-panel {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-icon {
    font-size: 1.5rem;
}

.chat-title {
    font-weight: 700;
    color: #fff;
    flex: 1;
}

.chat-status {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.chat-message {
    display: flex;
    gap: 12px;
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.message-content {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 16px;
    max-width: 80%;
}

.message-content p {
    margin: 0 0 8px;
    color: #e0e0e0;
    font-size: 0.9rem;
}

.message-content p:last-child {
    margin: 0;
}

.message-hint {
    color: #666 !important;
    font-size: 0.8rem !important;
    font-style: italic;
}

.chat-message.user .message-content {
    background: rgba(212, 175, 55, 0.15);
    margin-left: auto;
}

/* Chat Input */
.chat-input-area {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.quick-commands {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.quick-cmd {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: #aaa;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-cmd:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.4);
    color: var(--gold);
}

.chat-input-wrapper {
    display: flex;
    gap: 10px;
}

.chat-input-wrapper input {
    flex: 1;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 0.9rem;
}

.chat-input-wrapper input:focus {
    border-color: var(--gold);
    outline: none;
}

.chat-send-btn {
    width: 44px;
    height: 44px;
    background: var(--gold);
    border: none;
    border-radius: 12px;
    color: #0f0f23;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chat-send-btn:hover {
    transform: scale(1.05);
}

/* Agent Status Bar */
.agent-status-bar {
    margin-top: 20px;
    padding: 16px 24px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #10b981;
    font-weight: 600;
}

.pulse-dot {
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.status-info {
    flex: 1;
    display: flex;
    gap: 24px;
    color: #888;
    font-size: 0.85rem;
}

.status-info code {
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace;
}

.btn-stop-agent {
    padding: 8px 16px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 8px;
    color: #ef4444;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-stop-agent:hover {
    background: rgba(239, 68, 68, 0.3);
}

@media (max-width: 900px) {
    .agent-builder {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   EXPANDED AGENT BUILDER STYLES
   ============================================= */

/* Strategy Presets */
.strategy-presets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.preset-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.preset-btn:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.3);
}

.preset-btn.active {
    background: rgba(212, 175, 55, 0.12);
    border-color: var(--gold);
}

.preset-icon {
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.preset-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}

.preset-desc {
    font-size: 0.65rem;
    color: #666;
    margin-top: 2px;
}

.preset-btn.active .preset-name {
    color: var(--gold);
}

/* Protocol Grid */
.protocol-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.protocol-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.protocol-chip img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.protocol-chip span {
    font-size: 0.65rem;
    color: #888;
    text-align: center;
}

.protocol-chip:hover {
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.3);
}

.protocol-chip.active {
    background: rgba(212, 175, 55, 0.12);
    border-color: var(--gold);
}

.protocol-chip.active span {
    color: var(--gold);
}

/* Asset Categories */
.asset-category {
    margin-bottom: 14px;
}

.asset-category:last-child {
    margin-bottom: 0;
}

.category-label {
    display: block;
    font-size: 0.7rem;
    color: #666;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Vault Count Selector */
.vault-count-selector,
.slippage-buttons,
.compound-buttons {
    display: flex;
    gap: 8px;
}

.count-btn,
.slippage-btn,
.compound-btn {
    flex: 1;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #888;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.count-btn:hover,
.slippage-btn:hover,
.compound-btn:hover {
    border-color: rgba(212, 175, 55, 0.4);
}

.count-btn.active,
.slippage-btn.active,
.compound-btn.active {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold);
    color: var(--gold);
}

/* Collapsible Advanced Settings */
.config-card.collapsible .collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0;
}

.config-card.collapsible .collapse-icon {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}

.config-card.collapsible.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.config-card.collapsible.collapsed .collapsible-content {
    display: none;
}

.collapsible-content {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Dual Range Display */
.dual-range-display {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--gold);
}

/* Deploy Note */
.deploy-note {
    text-align: center;
    font-size: 0.75rem;
    color: #666;
    margin-top: 8px;
}

/* Scrollable Config Panel */
.agent-config-panel {
    max-height: 80vh;
    overflow-y: auto;
    padding-right: 8px;
}

.agent-config-panel::-webkit-scrollbar {
    width: 4px;
}

.agent-config-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

.agent-config-panel::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.3);
    border-radius: 2px;
}

/* Make config panel wider */
.agent-builder {
    grid-template-columns: 480px 1fr;
}

@media (max-width: 1100px) {
    .agent-builder {
        grid-template-columns: 1fr;
    }

    .protocol-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .strategy-presets {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =============================================
   PORTFOLIO DASHBOARD STYLES
   ============================================= */

/* Portfolio section should not show sidebar */
#section-portfolio {
    position: relative;
}

#section-portfolio .portfolio-stats-grid,
#section-portfolio .portfolio-content {
    max-width: 100%;
}

/* Stats Grid */
.portfolio-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.portfolio-stat-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
}

.portfolio-stat-card:hover {
    border-color: rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
}

.portfolio-stat-card.primary {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-color: rgba(212, 175, 55, 0.3);
}

.portfolio-stat-card .stat-icon {
    font-size: 2rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.portfolio-stat-card .stat-content {
    display: flex;
    flex-direction: column;
}

.portfolio-stat-card .stat-label {
    font-size: 0.8rem;
    color: #888;
    margin-bottom: 4px;
}

.portfolio-stat-card .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.portfolio-stat-card .stat-change {
    font-size: 0.75rem;
    margin-top: 2px;
}

.portfolio-stat-card .stat-change.positive {
    color: #10b981;
}

.portfolio-stat-card .stat-change.negative {
    color: #ef4444;
}

.portfolio-stat-card .stat-subtext {
    font-size: 0.7rem;
    color: #666;
    margin-top: 2px;
}

/* Portfolio Content Layout */
.portfolio-content {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
}

.portfolio-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.portfolio-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Portfolio Cards */
.portfolio-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
}

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

.portfolio-card .card-header h3 {
    font-size: 1rem;
    color: #fff;
    margin: 0;
}

.card-badge {
    font-size: 0.75rem;
    padding: 4px 10px;
    background: rgba(212, 175, 55, 0.15);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    color: var(--gold);
}

.card-actions {
    display: flex;
    gap: 8px;
}

.btn-sm {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #aaa;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-sm:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
    color: var(--gold);
}

.select-sm {
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #aaa;
    font-size: 0.75rem;
    cursor: pointer;
}

/* Holdings Table */
.holdings-table .table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.table-empty {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.table-empty p {
    margin: 0;
    font-size: 0.9rem;
}

.btn-link {
    color: var(--gold);
    text-decoration: none;
    font-size: 0.85rem;
}

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

/* Agent Card */
.agent-card .agent-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.agent-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.agent-row .label {
    font-size: 0.8rem;
    color: #666;
}

.agent-row .value {
    font-size: 0.85rem;
    color: #fff;
}

.agent-row .value.monospace {
    font-family: monospace;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
}

.agent-actions {
    display: flex;
    gap: 8px;
}

.btn-fund,
.btn-withdraw-all {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-fund {
    background: linear-gradient(135deg, #D4AF37 0%, #F4E4BC 100%);
    color: #0f0f23;
}

.btn-withdraw-all {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #aaa;
}

.btn-fund:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.btn-withdraw-all:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.status-badge {
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.status-badge.inactive {
    background: rgba(255, 255, 255, 0.05);
    color: #666;
}

/* Allocation Chart */
.allocation-chart {
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.chart-placeholder {
    width: 150px;
    height: 150px;
}

.donut-chart {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(rgba(212, 175, 55, 0.2) 0deg,
            rgba(212, 175, 55, 0.2) 360deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-hole {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #0f0f23;
    display: flex;
    align-items: center;
    justify-content: center;
}

.donut-label {
    font-size: 0.75rem;
    color: #666;
}

.allocation-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

/* Quick Actions */
.quick-action-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-action:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.3);
}

.quick-action .action-icon {
    font-size: 1.3rem;
}

.quick-action span:last-child {
    font-size: 0.75rem;
    color: #aaa;
}

/* Notifications */
.notif-count {
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 10px;
    padding: 0 6px;
}

.notifications-list {
    max-height: 200px;
    overflow-y: auto;
}

.notif-empty {
    text-align: center;
    padding: 20px;
    color: #666;
    font-size: 0.85rem;
}

/* Transaction History */
.tx-history {
    max-height: 300px;
    overflow-y: auto;
}

/* Vault Positions */
.vault-positions {
    max-height: 400px;
    overflow-y: auto;
}

/* Responsive */
@media (max-width: 1100px) {
    .portfolio-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 600px) {
    .portfolio-stats-grid {
        grid-template-columns: 1fr;
    }

    .holdings-table .table-header {
        display: none;
    }
}

/* Dynamic Portfolio Elements */

/* Holding Rows */
.holding-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 12px;
    padding: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.2s ease;
}

.holding-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.holding-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.holding-info .asset-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.holding-row .positive {
    color: #10b981;
}

.holding-row .negative {
    color: #ef4444;
}

/* Position Cards */
.position-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.position-card:hover {
    border-color: rgba(212, 175, 55, 0.3);
}

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

.position-name {
    font-weight: 600;
    color: #fff;
}

.position-apy {
    font-size: 0.8rem;
    color: var(--gold);
    font-weight: 600;
}

.position-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.position-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}

.position-row .label {
    color: #666;
}

.position-row .value {
    color: #fff;
}

.position-row .value.positive {
    color: #10b981;
}

.position-actions {
    display: flex;
    gap: 8px;
}

/* Transaction Rows */
.tx-row {
    display: grid;
    grid-template-columns: 100px 1fr auto 60px;
    gap: 12px;
    padding: 12px;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tx-type {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}

.tx-type.deposit {
    color: #10b981;
}

.tx-type.withdraw {
    color: #ef4444;
}

.tx-type.harvest {
    color: var(--gold);
}

.tx-type.rebalance {
    color: #3b82f6;
}

.tx-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tx-vault {
    font-size: 0.85rem;
    color: #fff;
}

.tx-time {
    font-size: 0.7rem;
    color: #666;
}

.tx-amount {
    font-weight: 600;
    text-align: right;
}

.tx-link {
    font-size: 0.75rem;
    color: var(--gold);
    text-decoration: none;
}

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

/* Allocation Legend */
.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-name {
    flex: 1;
    color: #aaa;
}

.legend-value {
    color: #fff;
    font-weight: 600;
}

/* Notification Items */
.notif-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.8rem;
}

.notif-text {
    color: #e0e0e0;
}

.notif-time {
    color: #666;
    font-size: 0.7rem;
}

/* ===========================================
   SMOOTH UI TRANSITIONS - Global Enhancements
   =========================================== */

/* Smooth hover on all interactive elements */
button,
.btn,
.pool-card,
.card,
a,
input,
select,
.nav-item,
.filter-btn,
.tab-btn {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pool cards smooth hover */
.pool-card:hover,
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(212, 168, 83, 0.08);
}

/* Buttons smooth */
button:hover:not(:disabled),
.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.1);
}

button:active:not(:disabled),
.btn:active:not(:disabled) {
    transform: translateY(0);
    filter: brightness(0.95);
}

/* Modal smooth entrance */
.modal-overlay {
    animation: fadeIn 0.2s ease-out;
}

.modal-container {
    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

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

/* Smooth loading states */
.loading {
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Navigation smooth */
.nav-item:hover {
    background: rgba(212, 168, 83, 0.1);
}

.nav-item.active {
    background: rgba(212, 168, 83, 0.15);
    border-left: 3px solid var(--gold);
}

/* Risk badge hover effects */
.risk-badge:hover {
    transform: scale(1.05);
}

/* Smooth scroll for all sections */
.section,
.pools-container,
.content {
    scroll-behavior: smooth;
}

/* APY value animations */
.apy-value {
    transition: color 0.3s ease, transform 0.2s ease;
}

.apy-value:hover {
    transform: scale(1.02);
}

/* Input focus smooth */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(212, 168, 83, 0.15);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Toast notifications smooth */
.toast {
    animation: slideInRight 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

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

/* Skeleton loading animation */
.skeleton {
    background: linear-gradient(90deg,
            var(--bg-elevated) 25%,
            var(--bg-elevated-2) 50%,
            var(--bg-elevated) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

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

    100% {
        background-position: -200% 0;
    }
}

/* Pool Type Selector */
.pool-type-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pool-type-btn {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.pool-type-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.pool-type-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--bg-void);
}

/* Custom Icon Styles */
.nav-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.logo-icon {
    width: 32px;
    height: 32px;
}


/* Protocol Search Bar */
.protocol-search-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
}

.protocol-search-wrapper:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.15);
}

.protocol-search-icon {
    font-size: 14px;
    opacity: 0.6;
}

.protocol-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 13px;
}


/* ===========================================
   MODAL REDESIGN - Greek Gaming Aesthetic (V2 Aggressive)
   =========================================== */

/* Overlay with High Blur */
.pool-detail-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    /* Darker overlay */
    backdrop-filter: blur(16px);
    /* Strong blur */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

/* Modal Container - Dark & Gold */
.pool-detail-modal {
    background: #080810;
    /* Deepest Void */
    background-image: linear-gradient(180deg, rgba(212, 168, 83, 0.05) 0%, transparent 100%);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(212, 168, 83, 0.4);
    /* Visible Gold Border */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(212, 168, 83, 0.15);
    /* Deep shadow + Gold Glow */
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

/* ====================================================
   Artisan Agent Verdict Banner (Verification Feature)
   ==================================================== */
.artisan-verdict {
    margin: var(--space-2);
    margin-bottom: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    position: relative;
    overflow: hidden;
}

.artisan-verdict::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    background: repeating-linear-gradient(45deg,
            transparent,
            transparent 10px,
            currentColor 10px,
            currentColor 11px);
}

/* VERIFIED SAFE - Green */
.verdict-safe {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border: 2px solid rgba(34, 197, 94, 0.6);
    color: #22c55e;
}

/* CAUTION - Yellow/Amber */
.verdict-caution {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.05));
    border: 2px solid rgba(245, 158, 11, 0.6);
    color: #f59e0b;
}

/* HIGH RISK - Red */
.verdict-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border: 2px solid rgba(239, 68, 68, 0.6);
    color: #ef4444;
}

.verdict-stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    min-width: 90px;
    border-right: 1px solid currentColor;
    opacity: 0.3;
    position: relative;
    z-index: 1;
}

.verdict-icon {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: var(--space-1);
}

.verdict-text {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.verdict-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    position: relative;
    z-index: 1;
}

.verdict-agent {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.verdict-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.verdict-score {
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: var(--space-1);
}

.verdict-source {
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.7;
    margin-top: var(--space-2);
    font-style: italic;
}

/* Header Section */
.pool-detail-header {
    background: rgba(255, 255, 255, 0.02);
    padding: var(--space-6);
    border-bottom: 1px solid rgba(212, 168, 83, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.pool-detail-title h2 {
    font-family: var(--font-display);
    font-size: 2.2rem;
    background: linear-gradient(135deg, #FFD700 0%, #D4A853 100%);
    /* Bright Gold */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: var(--space-2);
    filter: drop-shadow(0 0 10px rgba(212, 168, 83, 0.3));
    /* Text Glow */
    letter-spacing: -0.5px;
}

.pool-detail-icon img {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
}


/* Close Button Enhancement */
.modal-close {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 1.1rem;
    cursor: pointer;
    z-index: 20;
}

.modal-close:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--danger);
    color: var(--danger);
    transform: rotate(90deg);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

.modal-close svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

/* Icon Backgrounds in Cards */
.detail-icon-bg {
    margin-bottom: 8px;
    color: var(--gold);
    background: rgba(212, 168, 83, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-2) auto;
    border: 1px solid rgba(212, 168, 83, 0.2);
}

.detail-icon-bg svg {
    width: 20px;
    height: 20px;
}

/* Insight Icons */
.insight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.insight-icon svg {
    width: 20px;
    height: 20px;
}

.insight-item.positive .insight-icon {
    color: var(--success);
}

.insight-item.warning .insight-icon {
    color: var(--warning);
}

.insight-item.neutral .insight-icon {
    color: var(--text-muted);
}

/* Metric Values with Arrows */
.metric-value svg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
}


/* Content Area */
.pool-detail-content {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* Premium Stats Grid */
.pool-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
}

.detail-card {
    background: #0C0C14;
    /* Darker than modal */
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Crisp Border */
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
    /* Inner Depth */
}

.detail-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 168, 83, 0.1);
}

.detail-label {
    font-family: var(--font-display);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    /* Wider spacing */
    color: var(--text-muted);
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.detail-value {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Market Dynamics Section (Glass) */
.premium-analysis {
    background: rgba(212, 168, 83, 0.03);
    border: 1px solid rgba(212, 168, 83, 0.2);
    border-radius: var(--radius-lg);
    position: relative;
    margin-top: var(--space-4);
    padding: var(--space-4);
}

.premium-analysis::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 168, 83, 0.5), transparent);
}

.smart-insights {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--space-2);
}

.smart-insights .insight-item {
    background: #0F0F1A;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid transparent;
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
}

.insight-item.positive {
    border-left-color: var(--success);
}

.insight-item.warning {
    border-left-color: var(--warning);
}

.insight-item.neutral {
    border-left-color: var(--text-muted);
}

.insight-icon {
    font-size: 1.1rem;
}


/* Action Buttons - MASSIVE GLOW */
.pool-detail-actions {
    margin-top: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: var(--space-4);
}

.btn-primary-large {
    background: linear-gradient(135deg, #D4A853 0%, #B8860B 100%);
    color: #000;
    /* Black text on gold is sharper */
    font-weight: 800;
    box-shadow: 0 0 30px rgba(212, 168, 83, 0.4);
    /* Strong Glow */
    border: 1px solid #FFD700;
    font-family: var(--font-display);
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    flex: 2;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary-large:hover {
    box-shadow: 0 0 50px rgba(212, 168, 83, 0.6);
    transform: translateY(-2px) scale(1.02);
    background: linear-gradient(135deg, #FFD700 0%, #D4A853 100%);
}

.btn-secondary-large {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    height: 56px;
    flex: 1;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary-large:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212, 168, 83, 0.05);
    box-shadow: 0 0 20px rgba(212, 168, 83, 0.1);
}

/* Animations using Hardware Acceleration */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.9);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(16px);
    }
}

/* Scrollbar */
.pool-detail-modal::-webkit-scrollbar {
    width: 4px;
}

.pool-detail-modal::-webkit-scrollbar-track {
    background: #080810;
}

.pool-detail-modal::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 2px;
}

/* Metrics Grid - Helper for Premium Analysis */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: var(--space-2);
}

.metric-card {
    background: #0C0C14;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value {
    font-size: 1.1rem;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text);
}

.metric-value.good {
    color: var(--success);
}

.metric-value.bad {
    color: var(--danger);
}

/* APY Breakdown */
.apy-breakdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
}

.apy-part {
    display: flex;
    align-items: center;
    gap: 6px;
}

.apy-part .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.apy-part.base .dot {
    background: var(--info);
}

.apy-part.reward .dot {
    background: var(--gold);
}

/* Risk Factors */
.risk-factors h4 {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.risk-list li {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ============================================
   PREMIUM PAGE REDESIGN (Greek Gaming V2)
   ============================================ */

/* Section Container */
.premium-section-greek {
    background: radial-gradient(circle at 50% 10%, rgba(212, 175, 55, 0.05) 0%, transparent 60%);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.premium-header-greek {
    text-align: center;
    margin-bottom: var(--space-8);
}

.premium-header-greek h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--space-2);
    background: linear-gradient(135deg, #fff 0%, #aaa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.premium-header-greek p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* Pricing Grid */
.pricing-grid-greek {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
    margin-bottom: 40px;
}

/* Pricing Card */
.pricing-card-greek {
    background: rgba(10, 10, 15, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 32px;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pricing-card-greek:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: rgba(212, 168, 83, 0.3);
}

/* Gold (Premium) Card Highlight */
.pricing-card-greek.gold {
    background: linear-gradient(160deg, rgba(20, 20, 25, 0.8) 0%, rgba(10, 10, 15, 0.9) 100%);
    border: 1px solid rgba(212, 168, 83, 0.4);
    box-shadow: 0 0 20px rgba(212, 168, 83, 0.05);
}

.pricing-card-greek.gold:hover {
    box-shadow: 0 0 30px rgba(212, 168, 83, 0.15);
    border-color: var(--gold);
}

.card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #D4AF37, #F5D185);
    color: #000;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 4px 16px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 10px rgba(212, 168, 83, 0.3);
}

/* Price Headers */
.price-header {
    margin-bottom: 24px;
    text-align: center;
}

.plan-name {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: block;
}

.pricing-card-greek.gold .plan-name {
    color: var(--gold);
}

.price-amount {
    font-family: 'Outfit', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.price-currency {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 400;
}

/* Features List */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
    flex-grow: 1;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: #ccc;
    font-size: 0.95rem;
}

.feature-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon svg {
    width: 12px;
    height: 12px;
}

.feature-item.checked .feature-icon {
    background: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.pricing-card-greek.gold .feature-item.checked .feature-icon {
    background: rgba(212, 168, 83, 0.2);
    color: var(--gold);
}

.feature-item.crossed .feature-icon {
    background: rgba(255, 255, 255, 0.05);
    color: #666;
}

/* Buttons */
.btn-gold-glow {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #D4AF37 0%, #B49025 100%);
    color: #000;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(212, 168, 83, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-gold-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 168, 83, 0.5);
}

.btn-secondary-greek {
    width: 100%;
    padding: 16px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary-greek:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Telegram Integration Section */
.telegram-card-greek {
    background: linear-gradient(135deg, rgba(34, 158, 217, 0.05) 0%, rgba(5, 5, 8, 0.8) 100%);
    border: 1px solid rgba(34, 158, 217, 0.2);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 32px;
    position: relative;
    overflow: hidden;
}

.telegram-card-greek::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: url('/static/icons/nav/premium.svg') no-repeat right center;
    opacity: 0.03;
    pointer-events: none;
}

.tg-icon-large {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #229ED9, #0088cc);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    box-shadow: 0 4px 20px rgba(34, 158, 217, 0.3);
}

.tg-content h3 {
    font-size: 1.5rem;
    margin-bottom: 8px;
    color: #fff;
}

.tg-content p {
    color: var(--text-muted);
    margin-bottom: 24px;
}

.btn-telegram-greek {
    background: #229ED9;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.btn-telegram-greek:hover {
    background: #1e8bbd;
    transform: translateY(-1px);
}

/* Upgrade Modal (Greek Style) */
.upgrade-modal-greek {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.upgrade-content-greek {
    background: #080810;
    border: 1px solid var(--gold);
    border-radius: 24px;
    padding: 40px;
    width: 100%;
    max-width: 480px;
    text-align: center;
    box-shadow: 0 0 50px rgba(212, 168, 83, 0.15);
    position: relative;
}

.upgrade-content-greek h2 {
    font-family: 'Outfit', sans-serif;
    color: var(--gold);
    margin: 0 0 16px 0;
}

.upgrade-content-greek p {
    color: #9ca3af;
    margin-bottom: 32px;
}

.upgrade-icon {
    font-size: 48px;
    margin-bottom: 24px;
    text-shadow: 0 0 20px rgba(212, 168, 83, 0.3);
}

.btn-greek-option {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px 20px;
    border-radius: 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-greek-option:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-greek-option.premium {
    background: linear-gradient(90deg, rgba(212, 168, 83, 0.1), transparent);
    border-color: rgba(212, 168, 83, 0.3);
}

.btn-greek-option.premium:hover {
    border-color: var(--gold);
    background: linear-gradient(90deg, rgba(212, 168, 83, 0.2), transparent);
}

.option-title {
    color: #fff;
    font-weight: 600;
    display: block;
    font-size: 1rem;
    text-align: left;
}

.option-sub {
    font-size: 0.8rem;
    color: var(--gold);
    display: block;
    text-align: left;
}

.option-price {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

.btn-greek-cancel {
    background: none;
    border: none;
    color: #666;
    margin-top: 16px;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-greek-cancel:hover {
    color: #fff;
}

/* ============================================
   FAQ SECTION (Greek Gaming)
   ============================================ */

.faq-section-greek {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.faq-section-greek h3 {
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    color: var(--text);
    margin-bottom: 30px;
}

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

.faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 24px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(212, 168, 83, 0.2);
    transform: translateY(-2px);
}

.faq-question {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 12px;
}

.faq-answer {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.faq-answer strong {
    color: #fff;
}

/* ===========================================
   FILTER CREDITS SYSTEM
   =========================================== */
.credits-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.credits-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--gold-subtle);
    border: 1px solid var(--border-gold);
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 0.8rem;
}

.credits-icon {
    font-size: 0.9rem;
}

.credits-count {
    font-weight: 700;
    color: var(--gold);
}

.credits-label {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.credits-info {
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.06), rgba(212, 168, 83, 0.02));
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-4);
}

.credits-tip {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.credits-tip strong {
    color: var(--gold);
}

.credits-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.btn-buy-credits {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--gradient-gold);
    border: none;
    border-radius: var(--radius-md);
    color: var(--bg-void);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--transition-base);
}

.btn-buy-credits:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-gold);
}

.credits-price {
    background: rgba(0, 0, 0, 0.15);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

.premium-link {
    font-size: 0.7rem;
    color: var(--gold);
    text-decoration: none;
    text-align: center;
    opacity: 0.8;
}

.premium-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* No credits warning */
.no-credits-warning {
    background: var(--danger-dim);
    border: 1px solid var(--danger);
    color: var(--danger);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    text-align: center;
    margin-bottom: var(--space-2);
}

/* ===========================================
   APPLY FILTERS BUTTON
   =========================================== */
.apply-filters-section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.btn-apply-filters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--gradient-gold);
    border: none;
    border-radius: var(--radius-md);
    color: var(--bg-void);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: var(--transition-base);
    box-shadow: var(--shadow-gold);
}

.btn-apply-filters:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(212, 168, 83, 0.4);
}

.btn-apply-filters:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.apply-icon {
    font-size: 1rem;
}

.apply-cost {
    background: rgba(0, 0, 0, 0.2);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.apply-note {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--space-2);
}

/* ============================================
   BUILD SECTION - Chain & Pool Type Selectors
   ============================================ */

/* Chain Selector */
.chain-selector-build {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.chain-btn-build {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-base);
    position: relative;
}

.chain-btn-build img {
    width: 20px;
    height: 20px;
}

.chain-btn-build:hover:not(.disabled) {
    background: var(--bg-hover);
    border-color: var(--gold-dim);
}

.chain-btn-build.active {
    background: var(--gold-subtle);
    border-color: var(--gold);
    color: var(--gold);
}

.chain-btn-build.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.coming-soon-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--info);
    color: white;
    font-size: 0.6rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* Pool Type Selector */
.pool-type-selector-build {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pool-type-btn-build {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-base);
    text-align: left;
}

.pool-type-btn-build .type-icon {
    font-size: 1.5rem;
}

.pool-type-btn-build .type-name {
    font-weight: 600;
    color: var(--text);
    flex: 1;
}

.pool-type-btn-build .type-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.pool-type-btn-build:hover {
    background: var(--bg-hover);
    border-color: var(--gold-dim);
}

.pool-type-btn-build.active {
    background: var(--gold-subtle);
    border-color: var(--gold);
}

.pool-type-btn-build.active .type-name {
    color: var(--gold);
}

/* Agent Vault Wrapper */
.agent-vault-wrapper {
    margin-bottom: var(--space-6);
}

.agent-vault-card {
    background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface));
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.vault-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.vault-icon {
    font-size: 2.5rem;
}

.vault-title h2 {
    font-size: 1.25rem;
    color: var(--text);
    margin-bottom: var(--space-1);
}

.vault-badge {
    background: var(--gold-subtle);
    color: var(--gold);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
}

.vault-apy {
    margin-left: auto;
    text-align: right;
}

.vault-apy .apy-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success);
}

.vault-apy .apy-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.vault-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.vault-stats .stat {
    text-align: center;
    padding: var(--space-3);
    background: var(--bg-surface);
    border-radius: var(--radius-md);
}

.vault-stats .stat-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

.vault-stats .stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

.vault-agent-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--success-dim);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    font-size: 0.85rem;
    color: var(--success);
}

.agent-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.vault-actions {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.btn-vault-deposit,
.btn-vault-withdraw {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-base);
}

.btn-vault-deposit {
    background: var(--gradient-gold);
    border: none;
    color: var(--bg-void);
}

.btn-vault-deposit:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
}

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

.btn-vault-withdraw:hover {
    border-color: var(--gold-dim);
    background: var(--bg-hover);
}

.vault-protocols {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8rem;
}

.protocols-label {
    color: var(--text-muted);
}

.protocol-badges {
    display: flex;
    gap: var(--space-1);
}

.protocol-badge {
    background: var(--bg-surface);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Vault Modal */
.vault-modal {
    max-width: 420px;
}

.vault-modal-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.vault-modal-header .modal-icon {
    font-size: 2rem;
}

.vault-modal-header h2 {
    font-size: 1.25rem;
}

.vault-modal-body .input-group {
    margin-bottom: var(--space-4);
}

.amount-input-wrapper {
    display: flex;
    gap: var(--space-2);
}

.amount-input-wrapper input {
    flex: 1;
    padding: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 1rem;
}

.btn-max {
    padding: var(--space-2) var(--space-3);
    background: var(--gold-subtle);
    border: 1px solid var(--gold-dim);
    border-radius: var(--radius-sm);
    color: var(--gold);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.75rem;
}

.balance-info {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--space-2);
}

.deposit-summary {
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    font-size: 0.85rem;
}

.summary-row .highlight {
    color: var(--success);
    font-weight: 600;
}

.btn-deposit-confirm,
.btn-withdraw-confirm {
    width: 100%;
    padding: var(--space-4);
    background: var(--gradient-gold);
    border: none;
    border-radius: var(--radius-md);
    color: var(--bg-void);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.modal-disclaimer {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--space-4);
}

/* ===========================================
   PRO MODE - AGENT BUILDER ENHANCEMENTS
   =========================================== */

/* Builder Header Row */
.builder-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-4);
}

/* Mode Toggle */
.mode-toggle-container {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.mode-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.mode-toggle {
    display: flex;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 4px;
}

.mode-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition-base);
}

.mode-btn:hover {
    color: var(--text);
}

.mode-btn.active {
    background: var(--gradient-gold);
    color: var(--bg-void);
    font-weight: 600;
}

.mode-icon {
    font-size: 1rem;
}

/* Amount Input Section */
.builder-amount-section {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-4);
    padding: var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.amount-input-group {
    flex: 1;
}

.amount-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.currency-symbol {
    font-size: 1.5rem;
    color: var(--gold);
    font-weight: 600;
}

.amount-input {
    flex: 1;
    padding: var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 600;
    min-width: 150px;
}

.amount-input:focus {
    outline: none;
    border-color: var(--gold);
}

.quick-amounts {
    display: flex;
    gap: var(--space-1);
    margin-left: var(--space-2);
}

.quick-amounts button {
    padding: var(--space-1) var(--space-2);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.75rem;
    transition: var(--transition-fast);
}

.quick-amounts button:hover,
.quick-amounts button.active {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--gold-subtle);
}

.selected-assets-display {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.asset-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.asset-pill {
    padding: var(--space-1) var(--space-3);
    background: var(--gold-subtle);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-xl);
    color: var(--gold);
    font-size: 0.85rem;
    font-weight: 500;
}

/* Pro Mode Only Elements */
.pro-mode-only {
    display: none;
}

body.builder-pro .pro-mode-only {
    display: block;
}

body.builder-pro .basic-mode-only {
    display: none;
}

/* Pro Section */
.pro-section {
    padding: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
}

.pro-section.hidden {
    display: none;
}

.pro-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.pro-badge {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--gold);
}

.pro-tooltip {
    color: var(--text-muted);
    cursor: help;
    font-size: 0.85rem;
}

/* Leverage Slider */
.leverage-control {
    margin-top: var(--space-3);
}

.leverage-slider-container {
    margin: var(--space-3) 0;
}

.leverage-slider-container input[type="range"] {
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, var(--success) 0%, var(--warning) 50%, var(--danger) 100%);
    border-radius: 4px;
    appearance: none;
    cursor: pointer;
}

.leverage-slider-container input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--gold);
    border: 3px solid var(--bg-void);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-gold);
}

.leverage-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-2);
}

.lev-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.leverage-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--bg-surface);
    border-radius: var(--radius-md);
}

.lev-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.lev-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.lev-stat-value {
    font-size: 1rem;
    font-weight: 600;
}

.lev-stat-value .highlight {
    color: var(--success);
}

.lev-stat.warning .lev-stat-value {
    color: var(--warning);
}

/* Liquidity Strategy Toggle */
.liquidity-strategy-toggle {
    display: flex;
    gap: var(--space-2);
}

.liq-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: var(--transition-base);
}

.liq-btn:hover {
    border-color: var(--gold);
    color: var(--text);
}

.liq-btn.active {
    border-color: var(--gold);
    background: var(--gold-subtle);
    color: var(--gold);
}

.liq-btn .btn-icon {
    font-size: 1.25rem;
}

.liq-btn .btn-text {
    font-size: 0.75rem;
    font-weight: 500;
}

.rebalance-config {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-surface);
    border-radius: var(--radius-md);
}

/* Duration Mode Toggle */
.duration-mode-toggle {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.dur-mode-btn {
    flex: 1;
    padding: var(--space-2);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    transition: var(--transition-base);
}

.dur-mode-btn.active {
    border-color: var(--gold);
    background: var(--gold-subtle);
    color: var(--gold);
}

/* Custom Duration Input */
.custom-duration-input {
    margin-bottom: var(--space-4);
}

.duration-split-input {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.duration-split-input input,
.duration-split-input select {
    padding: var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 1rem;
}

.duration-split-input input {
    width: 100px;
    text-align: center;
    font-weight: 600;
}

.duration-split-input select {
    flex: 1;
}

.duration-hint {
    font-size: 0.75rem;
    color: var(--gold);
    margin-top: var(--space-2);
}

/* Exit Targets */
.exit-targets {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.exit-targets h4 {
    font-size: 0.9rem;
    margin-bottom: var(--space-3);
}

.exit-target {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3);
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: 0.85rem;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--gold);
}

.input-with-unit {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.input-with-unit input {
    width: 80px;
    padding: var(--space-2);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-align: center;
    font-weight: 500;
}

.input-with-unit input:disabled {
    opacity: 0.5;
}

.input-with-unit .unit {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Pro Select */
.pro-select {
    width: 100%;
    padding: var(--space-3);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.9rem;
}

/* Custom Instructions */
.card-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.custom-instructions-input {
    width: 100%;
    padding: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    resize: vertical;
    min-height: 100px;
}

.custom-instructions-input:focus {
    outline: none;
    border-color: var(--gold);
}

.custom-instructions-input::placeholder {
    color: var(--text-muted);
}

/* ===========================================
   NEURAL TERMINAL - Matrix/Cyberpunk Style
   =========================================== */

.neural-terminal {
    position: relative;
    margin-top: var(--space-6);
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid var(--gold-dim);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    box-shadow:
        0 0 20px rgba(212, 168, 83, 0.1),
        inset 0 0 60px rgba(0, 255, 65, 0.02);
}

.terminal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(180deg, rgba(212, 168, 83, 0.15), rgba(212, 168, 83, 0.05));
    border-bottom: 1px solid var(--gold-dim);
}

.terminal-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.terminal-icon {
    font-size: 1rem;
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {

    0%,
    100% {
        opacity: 1;
        text-shadow: 0 0 10px var(--gold);
    }

    50% {
        opacity: 0.7;
        text-shadow: 0 0 5px var(--gold);
    }
}

.terminal-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.terminal-status {
    font-size: 0.7rem;
    padding: 2px 8px;
    background: rgba(100, 100, 100, 0.3);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 500;
}

.terminal-status.deploying {
    background: rgba(234, 179, 8, 0.2);
    color: var(--warning);
    animation: blink 0.5s infinite;
}

.terminal-status.active {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.terminal-status.error {
    background: rgba(239, 68, 68, 0.2);
    color: var(--danger);
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.terminal-controls {
    display: flex;
    gap: var(--space-2);
}

.terminal-btn {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.terminal-btn:hover {
    background: rgba(212, 168, 83, 0.2);
    border-color: var(--gold);
    color: var(--gold);
}

.terminal-body {
    display: flex;
    flex-direction: column;
    height: 300px;
}

.terminal-output {
    flex: 1;
    padding: var(--space-4);
    overflow-y: auto;
    font-size: 0.8rem;
    line-height: 1.6;
}

.terminal-output::-webkit-scrollbar {
    width: 6px;
}

.terminal-output::-webkit-scrollbar-thumb {
    background: var(--gold-dim);
    border-radius: 3px;
}

.log-line {
    margin-bottom: 4px;
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.log-line .log-time {
    color: rgba(150, 150, 150, 0.6);
    font-size: 0.7rem;
    margin-right: 8px;
}

.log-line.info {
    color: #00ff41;
    /* Matrix green */
}

.log-line.success {
    color: #22c55e;
}

.log-line.warning {
    color: var(--warning);
}

.log-line.error {
    color: var(--danger);
}

.log-line.system {
    color: var(--gold);
    opacity: 0.8;
}

.log-line.command {
    color: #a855f7;
    /* Purple for user commands */
}

/* Syntax highlighting in logs */
.highlight-address {
    color: #60a5fa;
    /* Blue for addresses */
}

.highlight-number {
    color: #f472b6;
    /* Pink for numbers */
}

.highlight-success {
    color: #22c55e;
    font-weight: 600;
}

.highlight-error {
    color: var(--danger);
    font-weight: 600;
}

.highlight-warning {
    color: var(--warning);
    font-weight: 600;
}

.terminal-input-area {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid rgba(212, 168, 83, 0.2);
    background: rgba(0, 0, 0, 0.5);
}

.terminal-prompt {
    color: var(--gold);
    font-weight: 600;
    margin-right: var(--space-2);
}

.terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #00ff41;
    font-family: inherit;
    font-size: 0.85rem;
    outline: none;
}

.terminal-input::placeholder {
    color: rgba(0, 255, 65, 0.3);
}

/* ===========================================
   PRO MODE TOOLTIPS
   =========================================== */

.pro-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(212, 168, 83, 0.1);
    border: 1px solid rgba(212, 168, 83, 0.3);
    border-radius: 50%;
    font-size: 0.7rem;
    color: var(--gold);
    cursor: help;
    margin-left: var(--space-2);
    transition: all 0.2s;
    position: relative;
}

.pro-tooltip:hover {
    background: rgba(212, 168, 83, 0.3);
    transform: scale(1.1);
}

.pro-tooltip::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-elevated);
    border: 1px solid var(--gold);
    color: var(--text);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: normal;
    white-space: nowrap;
    max-width: 250px;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    z-index: 100;
    pointer-events: none;
    box-shadow: var(--shadow-gold);
}

.pro-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 8px);
}

/* ===========================================
   BUILD SECTION - FULL WIDTH SINGLE COLUMN
   Hides chat panel, makes config panel full width
   =========================================== */

/* Hide the right chat panel */
.agent-chat-panel {
    display: none !important;
}

/* Make agent-builder single column */
.agent-builder {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-4);
}

/* Config panel - single column, centered */
.agent-config-panel {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--space-6) !important;
}

/* Limit card widths */
.agent-config-panel .config-card {
    max-width: 700px;
    width: 100%;
}

/* ===========================================
   INLINE COMMAND BAR (Header Section)
   =========================================== */
.builder-command-section {
    flex: 1;
}

.command-bar-inline {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--bg-surface);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-lg);
    padding: var(--space-2) var(--space-4);
}

.command-bar-inline .command-prompt {
    color: var(--gold);
    font-family: 'Fira Code', 'Monaco', monospace;
    font-size: 1.1rem;
    font-weight: bold;
}

.command-bar-inline .command-input-inline {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    min-width: 200px;
}

.command-bar-inline .command-input-inline::placeholder {
    color: var(--text-muted);
}

.command-bar-inline .command-execute-btn {
    padding: var(--space-2) var(--space-4);
    background: var(--gradient-gold);
    border: none;
    border-radius: var(--radius-md);
    color: var(--bg-void);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.command-bar-inline .command-execute-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(212, 168, 83, 0.3);
}

/* ===========================================
   TVL DUAL RANGE SLIDER (Build Section)
   =========================================== */
.tvl-range-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

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

.tvl-range-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.tvl-range-values {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    color: var(--gold);
}

.dual-range-wrapper {
    position: relative;
    height: 24px;
}

.dual-range-track {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
}

.dual-range-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: var(--gold);
    border-radius: 3px;
    left: 33%;
    right: 0%;
}

.dual-range-slider {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.dual-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 18px;
    height: 18px;
    background: var(--gold);
    border: 2px solid var(--bg-void);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(212, 168, 83, 0.4);
}

.dual-range-slider::-moz-range-thumb {
    pointer-events: auto;
    width: 18px;
    height: 18px;
    background: var(--gold);
    border: 2px solid var(--bg-void);
    border-radius: 50%;
    cursor: pointer;
}

.tvl-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* TVL Custom Input */
.tvl-range-display {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.tvl-custom-btn {
    padding: var(--space-1) var(--space-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tvl-custom-btn:hover,
.tvl-custom-btn.active {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212, 168, 83, 0.1);
}

.tvl-custom-inputs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tvl-input-group {
    display: flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-1) var(--space-2);
}

.tvl-input-group:focus-within {
    border-color: var(--gold);
}

.tvl-input-prefix {
    color: var(--gold);
    font-weight: 600;
    font-size: 0.8rem;
}

.tvl-custom-input {
    width: 60px;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.8rem;
    outline: none;
}

.tvl-custom-input::placeholder {
    color: var(--text-muted);
}

/* ===========================
   PROTOCOLS SECTION
   =========================== */

#section-protocols {
    padding: var(--space-6);
}

.protocol-stats-bar {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-6);
}

.protocol-stats-bar .stat-item {
    text-align: center;
}

.protocol-stats-bar .stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold);
}

.protocol-stats-bar .stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

#section-protocols .protocol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4);
}

#section-protocols .protocol-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: all var(--transition-fast);
    cursor: pointer;
}

#section-protocols .protocol-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(212, 168, 83, 0.15);
}

#section-protocols .protocol-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

#section-protocols .protocol-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    object-fit: contain;
}

#section-protocols .protocol-info {
    flex: 1;
    position: relative;
}

#section-protocols .protocol-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 var(--space-2);
    color: var(--text);
}

.airdrop-badge {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1rem;
}

.protocol-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.protocol-tags .tag {
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
}

.protocol-tags .tag.lending {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.protocol-tags .tag.amm {
    background: rgba(168, 85, 247, 0.2);
    color: #c084fc;
}

.protocol-tags .tag.vault {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.protocol-tags .tag.staking {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.protocol-tags .tag.rewards {
    background: rgba(236, 72, 153, 0.2);
    color: #f472b6;
}

.protocol-tags .tag.yield {
    background: rgba(212, 168, 83, 0.2);
    color: var(--gold);
}

.protocol-tags .tag.lp {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

.protocol-tags .tag.perps {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

#section-protocols .protocol-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.protocol-tvl {
    display: flex;
    flex-direction: column;
}

.protocol-tvl .tvl-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
}

.protocol-tvl .tvl-label {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.protocol-chains {
    display: flex;
    gap: 4px;
}

.protocol-chains img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

/* Custom Duration Popup */
.custom-duration-popup {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--gold);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    z-index: 100;
    min-width: 280px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

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

.custom-duration-header span {
    font-weight: 600;
    color: var(--gold);
}

.close-popup-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.close-popup-btn:hover {
    color: var(--text);
}

.custom-duration-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.duration-input-group {
    display: flex;
    gap: var(--space-2);
}

.duration-input {
    flex: 1;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--text);
    font-size: 1rem;
    text-align: center;
}

.duration-input:focus {
    border-color: var(--gold);
    outline: none;
}

.duration-unit-select {
    flex: 1.5;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    color: var(--text);
    font-size: 0.9rem;
    cursor: pointer;
}

.duration-unit-select:focus {
    border-color: var(--gold);
    outline: none;
}

.apply-duration-btn {
    background: linear-gradient(135deg, var(--gold), #b8860b);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    color: #000;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.apply-duration-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 168, 83, 0.3);
}

.duration-custom-btn.active {
    background: linear-gradient(135deg, var(--gold), #b8860b) !important;
    color: #000 !important;
    border-color: var(--gold) !important;
}

.config-group {
    position: relative;
}