/* ==========================================================================
   Alkaid™ AI Unified Platform Stylesheet v1.0
   ========================================================================== */

/* --- Global & Shared Component Styles --- */
body { 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
    background-color: #0d0d0d;
    color: #fff;
}

/* Summary Metrics Section used on Home and Arena pages */
.summary-section-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 1rem; 
    margin-top: 20px; 
    margin-bottom: 20px; 
}

.summary-section { 
    background-color: #1a1a1a; 
    padding: 1.5rem; 
    border-radius: 8px; 
    border: 1px solid #333; 
    transition: all .2s ease-in-out; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
    border-top: 3px solid #00d4aa; 
}

.summary-section:hover { 
    transform: translateY(-4px); 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.3),0 4px 6px -2px rgba(0,0,0,.15); 
}

.summary-section h3 { 
    margin-top: 0; 
    margin-bottom: 15px; 
    font-size: 1.15em; 
    color: #ffffff; 
    border-bottom: 1px solid #444; 
    padding-bottom: 10px; 
    text-align: center; 
}

.summary-section .flex { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 8px; 
}

.summary-section .label { 
    color: #b0b0b0; 
    font-size: 0.9em; 
    flex-grow: 1; 
    text-align: left; 
}

.summary-section .value { 
    font-weight: bold; 
    font-size: 1em; 
    color: #ffffff; 
    flex-shrink: 0; 
    text-align: right; 
    margin-left: 8px; 
}

.summary-section .value.negative { 
    color: #ff4976; 
}

/* Core Advantage Cards on Landing Page */
.advantage-card {
    background-color: #1c1c1c;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid #374151;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.advantage-title {
    color: #00d4aa;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.advantage-text {
    font-size: 0.875rem;
    color: #d1d5db;
    line-height: 1.625;
}


/* --- Terminal Page Specific Styles --- */
#terminal-page {
    margin-top: 2rem;
}

#terminal-page .symbol-switcher { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
#terminal-page .symbol-btn { padding: 8px 16px; font-size: 14px; background-color: #333; color: #fff; border: 1px solid #555; border-radius: 20px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; }
#terminal-page .symbol-btn:hover { background-color: #444; }
#terminal-page .symbol-btn.active { background-color: #00d4aa; border-color: #00d4aa; color: #1a1a1a; font-weight: bold; }
#terminal-page .status { text-align: center; margin-bottom: 10px; font-size: 14px; min-height: 21px; }
#terminal-page .connected { color: #00d4aa; font-weight: bold; }
#terminal-page .disconnected { color: #ff6b6b; }
#terminal-page .price-info { display: flex; justify-content: center; gap: 30px; margin-bottom: 20px; font-size: 18px; }
#terminal-page .price-item { text-align: center; }
#terminal-page .price-label { font-size: 12px; color: #888; margin-bottom: 5px; }
#terminal-page .price-value { font-weight: bold; }
#terminal-page .up { color: #00d4aa; }
#terminal-page .down { color: #ff4976; }
#terminal-page .strategy-display { text-align: center; margin-bottom: 20px; font-size: 20px; font-weight: bold; padding: 10px; border-radius: 8px; transition: background-color 0.3s, color 0.3s; }
#terminal-page .strategy-bullish { background-color: rgba(0, 212, 170, 0.2); color: #00d4aa; }
#terminal-page .strategy-bearish { background-color: rgba(255, 73, 118, 0.2); color: #ff4976; }
#terminal-page .strategy-neutral { background-color: #333; color: #fff; }
#terminal-page .strategy-restricted { background-color: rgba(255, 165, 0, 0.2); color: #ffa500; border: 1px solid #ffa500; }
#terminal-page .strategy-error { background-color: rgba(255, 82, 82, 0.2); color: #ff5252; border: 1px solid #ff5252; }

/* === Strategy Timeframe Tabs === */
.strategy-timeframe-switcher {
    margin: 1rem 0;
    background: #1a1a1a;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #333;
}

.timeframe-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.timeframe-tab {
    flex: 1;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.timeframe-tab:hover:not(.locked) {
    background: #333;
    border-color: #00d4aa;
}

.timeframe-tab.active {
    background: linear-gradient(135deg, #00d4aa, #00b894);
    border-color: #00d4aa;
    color: #000;
}

.timeframe-tab.locked {
    background: #1f1f1f;
    border-color: #555;
    cursor: not-allowed;
    opacity: 0.6;
}

.timeframe-tab.locked:hover {
    background: #2a2a2a;
    border-color: #666;
}

.tab-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    position: relative;
}

.tab-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.timeframe-tab.active .tab-title {
    color: #000;
}

.timeframe-tab.locked .tab-title {
    color: #888;
}

.tab-requirement {
    font-size: 0.7rem;
    opacity: 0.8;
    color: #ccc;
}

.timeframe-tab.active .tab-requirement {
    color: #000;
    opacity: 0.7;
}

.timeframe-tab.locked .tab-requirement {
    color: #666;
}

.lock-icon {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 0.8rem;
    opacity: 0.7;
}

.tier-upgrade-prompt {
    background: linear-gradient(135deg, #ff6b6b, #ffa500);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    text-align: center;
    animation: glow 2s ease-in-out infinite alternate;
}

.tier-upgrade-prompt.hidden {
    display: none;
}

.upgrade-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.upgrade-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: #000;
}

.upgrade-requirement {
    font-size: 0.75rem;
    color: #333;
    opacity: 0.8;
}

@keyframes glow {
    0% { box-shadow: 0 0 5px rgba(255, 107, 107, 0.5); }
    100% { box-shadow: 0 0 20px rgba(255, 107, 107, 0.8); }
}

/* === Tier Tooltip Styles === */
.tier-tooltip {
    position: fixed;
    z-index: 1000;
    pointer-events: none;
}

.tooltip-content {
    background: linear-gradient(135deg, #333, #1a1a1a);
    border: 1px solid #555;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1.4;
    min-width: 200px;
}

.tooltip-title {
    font-weight: 600;
    color: #ffa500;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.tooltip-text {
    color: #ccc;
    margin-bottom: 0.25rem;
}

.tooltip-shortfall {
    color: #ff6b6b;
    font-weight: 500;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* === Wallet Info Clickable Styles === */
#wallet-info-clickable {
    border-radius: 6px;
    transition: all 0.2s ease;
}

#wallet-info-clickable:hover {
    background-color: #374151 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.15);
}

#wallet-info-clickable:active {
    transform: translateY(0);
    background-color: #4b5563 !important;
}

/* Add subtle glow effect on hover for insufficient balance */
#wallet-info-clickable:hover #wallet-balance-display.text-red-400 {
    text-shadow: 0 0 8px rgba(255, 107, 107, 0.5);
}

/* === Mobile Wallet Section Styles === */
#mobile-wallet-section {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid #374151;
    transition: all 0.2s ease;
}

#mobile-wallet-section:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

/* Enhanced mobile wallet cards */
#mobile-wallet-section .bg-gray-900\/80 {
    background-color: rgba(17, 24, 39, 0.8);
    border: 1px solid rgba(75, 85, 99, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}

#mobile-wallet-section .bg-gray-900\/80:hover {
    background-color: rgba(17, 24, 39, 0.9);
    border-color: rgba(75, 85, 99, 0.5);
    transform: translateY(-1px);
}

/* Balance card gradient enhancement */
#mobile-wallet-section .bg-gradient-to-r {
    background: linear-gradient(90deg, rgba(17, 24, 39, 0.8) 0%, rgba(0, 212, 170, 0.05) 100%);
    border: 1px solid rgba(0, 212, 170, 0.2);
    transition: all 0.2s ease;
}

#mobile-wallet-section .bg-gradient-to-r:hover {
    border-color: rgba(0, 212, 170, 0.3);
    box-shadow: 0 0 10px rgba(0, 212, 170, 0.1);
}

/* Button hover effects */
#mobile-logout-btn:hover {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}

#mobile-refresh-all:hover {
    background-color: rgba(55, 65, 81, 0.8) !important;
    color: #00d4aa !important;
}

#mobile-copy-address:hover,
#mobile-refresh-balance:hover {
    background-color: rgba(0, 212, 170, 0.1) !important;
}

/* Quick action buttons */
#mobile-manage-wallet:hover,
#mobile-switch-wallet:hover {
    background-color: rgba(55, 65, 81, 0.8) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

/* Balance status badges */
#mobile-balance-status {
    transition: all 0.2s ease;
}

/* Connection status indicator */
#mobile-wallet-section .w-3.h-3.bg-green-400 {
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
}

/* Mobile Toast Animations */
.mobile-toast {
    animation: slideInFromTop 0.3s ease-out;
}

@keyframes slideInFromTop {
    0% { 
        opacity: 0; 
        transform: translateY(-20px);
    }
    100% { 
        opacity: 1; 
        transform: translateY(0);
    }
}

/* Responsive adjustments for mobile wallet */
@media (max-width: 480px) {
    #mobile-wallet-section {
        margin-left: 1rem;
        margin-right: 1rem;
        padding: 1rem;
        border-radius: 0.75rem;
    }
    
    #mobile-wallet-section .grid {
        gap: 0.75rem;
    }
    
    #mobile-wallet-address {
        font-size: 0.75rem;
        word-break: break-all;
        line-height: 1.4;
    }
    
    #mobile-wallet-balance {
        font-size: 1.5rem;
        font-weight: 800;
    }
    
    /* Adjust button spacing on very small screens */
    #mobile-wallet-section .flex.space-x-2 {
        gap: 0.5rem;
    }
    
    /* Make quick action buttons stack on very small screens */
    #mobile-wallet-section .flex.space-x-2 > button {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 320px) {
    #mobile-wallet-section {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        padding: 0.75rem;
    }
    
    #mobile-wallet-balance {
        font-size: 1.25rem;
    }
    
    /* Stack logout and refresh buttons vertically on very small screens */
    #mobile-wallet-section .flex.items-center.space-x-2:last-child {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
}

/* === Tier-Based Symbol Switcher Styles === */
.tier-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tier-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.tier-badge.basic {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    color: #000;
}

.tier-badge.premium {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
}

.tier-badge.ultimate {
    background: linear-gradient(135deg, #a855f7, #9333ea);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.tier-info {
    font-size: 0.75rem;
    color: #d1d5db;
    opacity: 0.8;
}

/* Mobile responsiveness for timeframe tabs */
@media (max-width: 768px) {
    .timeframe-tabs {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .timeframe-tab {
        padding: 0.5rem;
    }
    
    .tab-content {
        flex-direction: row;
        justify-content: space-between;
    }
    
    .tab-title {
        font-size: 0.8rem;
    }
    
    .tab-requirement {
        font-size: 0.65rem;
    }
}
#terminal-page #chart-wrapper { position: relative; height: 550px; margin-top: 20px; }
#terminal-page #chart { height: 100%; width: 100%; background: #1a1a1a; border-radius: 8px; border: 1px solid #333; }
#terminal-page #legend { position: absolute; top: 12px; left: 12px; z-index: 1000; font-size: 14px; font-family: monospace; line-height: 1.6; color: #d1d4dc; pointer-events: none; display: none; background: rgba(26, 26, 26, 0.8); padding: 8px; border-radius: 4px;}
#terminal-page #legend .positive { color: #00d4aa; }
#terminal-page #legend .negative { color: #ff4976; }


#terminal-page .pro-display-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; margin-top: 20px; }
#terminal-page .pro-module { background-color:#222; padding:1.5rem; border-radius:8px; border: 1px solid #333; }
#terminal-page .pro-module h3 { margin-top: 0; margin-bottom: 15px; font-size: 16px; color: #00d4aa; border-bottom: 1px solid #444; padding-bottom: 10px; flex-shrink: 0; }
#terminal-page .factor-grid { display: grid; grid-template-columns: 1fr; gap: 12px; flex-grow: 1; }
#terminal-page .factor-item { display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
#terminal-page .factor-item .label { color: #ccc; }
#terminal-page .factor-item .value { font-weight: bold; font-family: monospace; color: #fff; transition: color 0.5s; }
#terminal-page .value.flicker { animation: flicker 2s infinite; }
#terminal-page .value.positive { color: #00d4aa; }
#terminal-page .value.negative { color: #ff4976; }
#terminal-page .value.neutral { color: #f5a623; }
#terminal-page #ai-compass-container { min-height: 240px; flex-grow: 1; }
#terminal-page .info { margin-top: 25px; text-align: center; font-size: 12px; color: #888; }


/* --- Arena Page Styles --- */
#arena-page th, #arena-page td { padding:.75rem 1rem; text-align:center; white-space:nowrap; }
#arena-page th { font-weight:600; background-color:#1f2937; color:#d1d5db; user-select:none; cursor:pointer; }
#arena-page td { font-weight:500; color:#d1d5db; }
#arena-page tr:nth-child(even) td { background-color:#111827; }
#arena-page tr:hover td { background-color:#1f2937; }
#arena-page .text-positive { color:#22c55e; font-weight:600; }
#arena-page .text-negative { color:#ef4444; font-weight:600; }
#arena-page .text-warning { color:#facc15; font-weight:600; }
#arena-page .loader { border:4px solid #374151; border-top:4px solid #3b82f6; border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite; }
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* --- Filter Toolbar Styles --- */
#filter-section .filter-input {
    background-color: #374151; /* bg-gray-700 */
    border: 1px solid #4b5563; /* border-gray-600 */
    color: white;
    font-size: 0.875rem;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}
#filter-section .filter-input:focus {
    outline: none;
    border-color: #3b82f6; /* focus:border-blue-500 */
    box-shadow: 0 0 0 2px #1e40af; /* focus:ring-2 focus:ring-blue-700 */
}
#filter-section .filter-input::placeholder {
    color: #9ca3af; /* placeholder-gray-400 */
}
#filter-section .filter-btn {
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s;
    width: 100%;
}
/* --- Terminal Chart Legend/Tooltip Style --- */
#terminal-page #legend {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1000;
    font-size: 14px;
    font-family: monospace;
    line-height: 1.6;
    color: #d1d4dc;
    pointer-events: none;
    display: none; /* 初始状态隐藏，由JS控制显示 */
    background: rgba(26, 26, 26, 0.8);
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #444;
}

#terminal-page #legend .positive {
    color: #22c55e; /* 对应 text-positive */
}

#terminal-page #legend .negative {
    color: #ef4444; /* 对应 text-negative */
}
/* 机器人动态专业化样式 */

.bot-feed-item {
    display: inline-flex;
    align-items: center;
    margin-right: 2rem;
    padding: 0.25rem 0.5rem;
    background: rgba(26, 26, 26, 0.8);
    border-radius: 4px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bot-feed-item span {
    margin-right: 0.75rem;
    display: inline-block;
}

.wallet-addr {
    color: #a0a0a0;
    font-weight: 500;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.strategy-id {
    color: #00d4aa;
    font-weight: 600;
    min-width: 50px;
}

.action-type {
    color: #ffffff;
    font-weight: 500;
    min-width: 60px;
    text-align: center;
    padding: 0.125rem 0.375rem;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
}

.trading-pair {
    color: #ffa726;
    font-weight: 600;
    min-width: 80px;
}

.trade-pnl {
    font-weight: 700;
    min-width: 80px;
    text-align: right;
}

.trade-pnl.positive {
    color: #00d4aa;
}

.trade-pnl.negative {
    color: #ff4976;
}

.trade-pnl.neutral {
    color: #888;
}

.total-pnl {
    font-weight: 700;
    min-width: 100px;
    text-align: right;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 0.75rem;
}

.total-pnl.positive {
    color: #00d4aa;
}

.total-pnl.negative {
    color: #ff4976;
}

/* K线详情图例样式 */

#legend {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 100;
    background: rgba(26, 26, 26, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 12px;
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.4;
    min-width: 200px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#legend .positive {
    color: #00d4aa;
}

#legend .negative {
    color: #ff4976;
}

/* 🔧 新增：钱包动态标题栏样式 */
.bot-feed-headers {
    display: grid;
    grid-template-columns: 1fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid #333;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bot-feed-headers span {
    text-align: center;
}

.header-wallet {
    text-align: left !important;
}

/* 🔧 修改：调整钱包动态容器高度，为标题栏留出空间 */
#ai-bot-marquee-container {
    background: #2a2a2a;
    border-radius: 8px;
    height: 200px; /* 增加高度以容纳标题栏 */
    overflow: hidden;
    border: 1px solid #444;
}

#ai-bot-marquee {
    height: 150px; /* 减少滚动区域高度，为标题栏留出空间 */
    overflow: hidden;
    padding: 0;
}

/* 🔧 优化：bot feed item 样式调整 */
.bot-feed-item {
    display: grid;
    grid-template-columns: 1fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 11px;
    line-height: 1.3;
    align-items: center;
}

.bot-feed-item:hover {
    background: rgba(0, 212, 170, 0.05);
}

.wallet-addr {
    font-family: 'Courier New', monospace;
    color: #00d4aa;
    text-align: left;
}

.strategy-id {
    color: #4a90e2;
    font-weight: 600;
    text-align: center;
}

.action-type {
    text-align: center;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
}

.trading-pair {
    color: #ccc;
    text-align: center;
}

.trade-pnl, .total-pnl {
    text-align: center;
    font-weight: 600;
}

.trade-pnl.positive, .total-pnl.positive {
    color: #00d4aa;
}

.trade-pnl.negative, .total-pnl.negative {
    color: #ff4976;
}

.trade-pnl.neutral, .total-pnl.neutral {
    color: #888;
}

/* 🔧 修改：增加图表高度 */
#chart {
    height: 500px !important; /* 从默认的400px增加到500px */
    width: 100%;
    border-radius: 8px;
    background: #1f1f1f;
    border: 1px solid #333;
}

#chart-wrapper {
    position: relative;
    margin: 20px 0;
    background: #1f1f1f;
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #333;
}

/* 🔧 优化：图例样式调整 */
#legend {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 10px;
    border-radius: 6px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    z-index: 1000;
    display: none;
    pointer-events: none;
    max-width: 320px;
    line-height: 1.5;
    border: 1px solid #444;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* 🔧 响应式设计：移动端优化 */
@media (max-width: 768px) {
    .bot-feed-headers {
        font-size: 9px;
        padding: 6px 8px;
    }
    
    .bot-feed-item {
        font-size: 9px;
        padding: 4px 8px;
    }
    
    #chart {
        height: 400px !important; /* 移动端稍微降低高度 */
    }
    
    #ai-bot-marquee-container {
        height: 180px;
    }
    
    #ai-bot-marquee {
        height: 130px;
    }
}

/* 🔧 Arena页面摘要区域CSS样式修复 */

/* 摘要网格布局 */
.summary-section-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* 摘要卡片样式 */
.summary-card {
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.summary-card:hover {
    border-color: #00d4aa;
    box-shadow: 0 4px 20px rgba(0, 212, 170, 0.1);
    transform: translateY(-2px);
}

/* 摘要标题 */
.summary-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #00d4aa;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #444;
    text-align: center;
}

/* 摘要内容容器 */
.summary-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* 摘要统计项 */
.summary-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

/* 摘要标签 */
.summary-label {
    font-size: 0.9rem;
    color: #ccc;
    font-weight: 500;
}

/* 摘要数值 */
.summary-value {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    text-align: right;
}

/* 特殊数值颜色 */
.summary-value.positive {
    color: #00d4aa;
}

.summary-value.negative {
    color: #ff4976;
}

.summary-value.neutral {
    color: #f5a623;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .summary-section-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .summary-card {
        padding: 1rem;
    }
    
    .summary-title {
        font-size: 1rem;
    }
    
    .summary-stat {
        padding: 0.25rem 0;
    }
    
    .summary-label {
        font-size: 0.8rem;
    }
    
    .summary-value {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .summary-section-grid {
        gap: 0.75rem;
    }
    
    .summary-card {
        padding: 0.75rem;
    }
    
    .summary-content {
        gap: 0.5rem;
    }
}

/* 大屏幕优化 */
@media (min-width: 1200px) {
    .summary-section-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 加载状态样式 */
.summary-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    color: #666;
}

.summary-error {
    background: #2a1f1f;
    border-color: #ff4976;
    color: #ff4976;
    text-align: center;
    padding: 2rem;
}

/* 特定卡片的自定义样式 */
.summary-card[data-type="aum"] .summary-title {
    color: #4a90e2;
}

.summary-card[data-type="compute"] .summary-title {
    color: #f5a623;
}

.summary-card[data-type="strategies"] .summary-title {
    color: #00d4aa;
}

.summary-card[data-type="risk"] .summary-title {
    color: #ff5252;
}

/* 动画效果 */
.summary-card {
    animation: fadeInUp 0.6s ease-out;
}

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

/* 延迟动画 */
.summary-card:nth-child(1) { animation-delay: 0.1s; }
.summary-card:nth-child(2) { animation-delay: 0.2s; }
.summary-card:nth-child(3) { animation-delay: 0.3s; }
.summary-card:nth-child(4) { animation-delay: 0.4s; }

/* ==========================================================================
   机器人钱包动态CSS修复 - 替换 main.css 中相关部分
   ========================================================================== */

/* === 机器人动态容器基础样式 === */
#terminal-page #ai-bot-marquee-container {
    height: 220px;
    position: relative;
    background-color: #222;
    padding: 0;
    border-radius: 8px;
    border: 1px solid #333;
    overflow: hidden;
}

#terminal-page #ai-bot-marquee-header {
    text-align: center;
    color: #b0b0b0;
    font-size: 12px;
    margin-bottom: 0;
    border-bottom: 1px solid #333;
    padding: 8px;
    background: rgba(0, 0, 0, 0.3);
    /* PC端隐藏，移动端显示 */
    display: none;
}

#terminal-page #ai-bot-marquee {
    margin-top: 0;
    height: 175px;
    overflow: hidden;
    padding: 0;
}

/* === PC端表头样式 === */
.bot-feed-headers {
    display: grid;
    grid-template-columns: 1fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid #333;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bot-feed-headers span {
    text-align: center;
}

.header-wallet {
    text-align: left !important;
}

/* === PC端机器人动态项样式 === */
.bot-feed-item {
    display: grid;
    grid-template-columns: 1fr 0.8fr 0.8fr 0.8fr 0.8fr 0.8fr;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 11px;
    line-height: 1.3;
    align-items: center;
    transition: background 0.2s;
}

.bot-feed-item:hover {
    background: rgba(0, 212, 170, 0.05);
}

/* PC端显示的span元素 */
.bot-feed-item > span {
    display: block; /* 确保PC端span元素显示 */
}

/* PC端隐藏移动端div元素 */
.bot-feed-item .mobile-row {
    display: none; /* PC端隐藏移动端行 */
}

/* 字段样式 */
.wallet-addr {
    font-family: 'Courier New', monospace;
    color: #00d4aa;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.strategy-id {
    color: #4a90e2;
    font-weight: 600;
    text-align: center;
}

.action-type {
    text-align: center;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.trading-pair {
    color: #ccc;
    text-align: center;
}

.trade-pnl, .total-pnl {
    text-align: center;
    font-weight: 600;
}

.trade-pnl.positive, .total-pnl.positive {
    color: #00d4aa;
}

.trade-pnl.negative, .total-pnl.negative {
    color: #ff4976;
}

.trade-pnl.neutral, .total-pnl.neutral {
    color: #888;
}

/* === 移动端样式重写（768px以下） === */
@media (max-width: 768px) {
    /* 隐藏PC端表头，显示移动端标题 */
    .bot-feed-headers {
        display: none !important;
    }
    
    #terminal-page #ai-bot-marquee-header {
        display: block;
    }
    
    /* 调整容器高度以适应移动端 */
    #terminal-page #ai-bot-marquee-container {
        height: 240px;
    }
    
    #terminal-page #ai-bot-marquee {
        height: 200px;
        padding: 5px;
    }
    
    /* 重写机器人动态项为卡片式布局 */
    .bot-feed-item {
        display: block !important; /* 覆盖grid布局 */
        grid-template-columns: none !important;
        background: rgba(26, 26, 26, 0.9) !important;
        margin: 8px;
        padding: 12px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 12px;
        line-height: 1.4;
        gap: 0;
    }
    
    .bot-feed-item:hover {
        background: rgba(0, 212, 170, 0.1) !important;
        transform: scale(1.02);
    }
    
    /* 隐藏PC端的span元素 */
    .bot-feed-item > span {
        display: none !important;
    }
    
    /* 显示移动端的div元素 */
    .bot-feed-item .mobile-row {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
        padding: 2px 0;
    }
    
    .mobile-row:last-child {
        margin-bottom: 0;
    }
    
    .mobile-label {
        color: #888;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        min-width: 60px;
        font-weight: 600;
    }
    
    .mobile-value {
        font-weight: 600;
        text-align: right;
        flex-grow: 1;
        margin-left: 10px;
    }
    
    /* 特殊字段样式 */
    .wallet-addr-mobile {
        color: #00d4aa !important;
        font-family: 'Courier New', monospace;
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 150px;
    }
    
    .strategy-id-mobile {
        color: #4a90e2 !important;
        font-weight: 700;
    }
    
    .trading-pair-mobile {
        color: #ffa726 !important;
        font-weight: 600;
    }
    
    .action-type-mobile {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.1);
        font-size: 10px;
        font-weight: 600;
        color: #fff;
    }
    
    /* 盈亏颜色 */
    .positive-mobile {
        color: #00d4aa !important;
    }
    
    .negative-mobile {
        color: #ff4976 !important;
    }
    
    .neutral-mobile {
        color: #888 !important;
    }
}

/* === 超小屏幕优化（480px以下） === */
@media (max-width: 480px) {
    #terminal-page #ai-bot-marquee-container {
        height: 220px;
        margin: 0 -10px; /* 扩展到边缘 */
    }
    
    #terminal-page #ai-bot-marquee {
        height: 180px;
        padding: 3px;
    }
    
    .bot-feed-item {
        margin: 6px !important;
        padding: 10px !important;
        font-size: 11px !important;
    }
    
    .mobile-label {
        font-size: 9px !important;
        min-width: 50px !important;
    }
    
    .mobile-value {
        font-size: 11px;
    }
    
    .wallet-addr-mobile {
        max-width: 120px !important;
        font-size: 10px !important;
    }
}
@keyframes priceFlash {
    0% { background-color: transparent; }
    50% { background-color: rgba(0, 212, 170, 0.3); }
    100% { background-color: transparent; }
}

.status.error {
    color: #ff4976;
    background-color: rgba(255, 73, 118, 0.1);
}