/* 现代极简深色主题 - Opinion 做市商 */







@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');















:root {







    /* 主色 - 鲜艳橙色 */







    --primary: #F37021;







    --primary-hover: #E55F10;







    --primary-light: #FF8A4A;







    --primary-dark: #D4500F;















    /* 辅助色 - 深灰色 */







    --bg-primary: #2A2A2A;







    --bg-secondary: #1F1F1F;







    --bg-tertiary: #353535;







    --bg-card: #2A2A2A;







    --bg-hover: #3A3A3A;















    /* 文本颜色 */







    --text-primary: #FFFFFF;







    --text-secondary: #B0B0B0;







    --text-muted: #808080;







    --text-inverse: #2A2A2A;















    /* 状态颜色 */







    --success: #10B981;







    --warning: #F59E0B;







    --danger: #EF4444;







    --info: #3B82F6;















    /* 边框 */







    --border-color: #404040;







    --border-light: #505050;















    /* 阴影 */







    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);







    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);







    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);















    /* 圆角 */







    --radius-sm: 4px;







    --radius-md: 8px;







    --radius-lg: 12px;















    /* 间距 */







    --spacing-xs: 4px;







    --spacing-sm: 8px;







    --spacing-md: 12px;







    --spacing-lg: 16px;







    --spacing-xl: 24px;







    --spacing-2xl: 32px;















    /* 字体 */







    --font-body: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;







}















* {







    margin: 0;







    padding: 0;







    box-sizing: border-box;







    -webkit-font-smoothing: antialiased;







    -moz-osx-font-smoothing: grayscale;







}















body {







    font-family: var(--font-body);







    background-color: var(--bg-primary);







    color: var(--text-primary);







    line-height: 1.6;







    min-height: 100vh;







    font-size: 14px;







    overflow-x: hidden;







}















/* ============================================







   固定顶部导航栏







   ============================================ */







.header {







    position: fixed;







    top: 0;







    left: 0;







    right: 0;







    background-color: var(--bg-secondary);







    border-bottom: 1px solid var(--border-color);







    padding: var(--spacing-md) var(--spacing-xl);







    display: flex;







    align-items: center;







    justify-content: space-between;







    z-index: 1000;







    height: 64px;







}















.header-left {







    display: flex;







    align-items: center;







}















.logo {







    display: flex;







    align-items: center;







    gap: 14px; /* 品牌区间距 */







    height: 38px;







}















.logo-image {







    width: 36px; /* 品牌Logo尺寸 */







    height: 36px;







    object-fit: contain;







    filter: drop-shadow(0 2px 4px rgba(243, 112, 33, 0.3));







    transition: transform 0.3s ease;
    position: relative;
    z-index: 10;







    flex-shrink: 0; /* 防止logo被压缩 */







    /* 移除 margin-top，使用 flexbox 精确对齐 */







}















.logo-image:hover {







    transform: scale(1.05);







}















.logo-text {







    font-family: 'Outfit', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 30px; /* 品牌字号 */







    font-weight: 800;







    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);







    -webkit-background-clip: text;







    -webkit-text-fill-color: transparent;







    background-clip: text;







    letter-spacing: -0.6px;







    line-height: 1.2; /* 使用固定的line-height确保对齐 */







    /* 移除 margin-top，让 flexbox 自动对齐 */







    display: flex;







    align-items: center;







    height: 100%; /* 确保文字区域占满高度 */







}















.header-nav {







    display: flex;







    gap: var(--spacing-sm);







    flex: 1;







    justify-content: center;







    margin: 0 var(--spacing-xl);







}















.header-nav .nav-tab {







    background: transparent;







    border: none;







    color: var(--text-secondary);







    padding: var(--spacing-sm) var(--spacing-lg);







    font-size: 14px;







    font-weight: 500;







    cursor: pointer;







    border-radius: var(--radius-sm);







    transition: all 0.2s ease;







    white-space: nowrap;







    position: relative;







}















.header-nav .nav-tab:hover {







    color: var(--text-primary);







    background: var(--bg-hover);







}















.header-nav .nav-tab.active {







    color: var(--primary);







    background: var(--bg-hover);







}















.header-nav .nav-tab.active::after {







    content: '';







    position: absolute;







    bottom: -13px;







    left: 50%;







    transform: translateX(-50%);







    width: 4px;







    height: 4px;







    background: var(--primary);







    border-radius: 50%;







}

.header-nav .nav-tab.nav-tab-carnival {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(34, 197, 94, 0.12));
    border: 1px solid rgba(239, 68, 68, 0.32);
    color: var(--text-primary);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.12);
}

.header-nav .nav-tab.nav-tab-carnival:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.24), rgba(34, 197, 94, 0.16));
}

.header-nav .nav-tab.nav-tab-carnival::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35), 0 0 18px rgba(239, 68, 68, 0.35);
    animation: carnivalPulse 1.4s ease-in-out infinite;
}

.header-nav .nav-tab.nav-tab-radar::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35), 0 0 18px rgba(239, 68, 68, 0.35);
    animation: carnivalPulse 1.4s ease-in-out infinite;
}

@keyframes carnivalPulse {
    0% { transform: scale(0.92); opacity: 0.75; }
    50% { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(0.92); opacity: 0.75; }
}















.header-right {







    display: flex;







    align-items: center;







    gap: var(--spacing-md);







}















.btn-icon {







    background: transparent;







    border: none;







    color: var(--text-secondary);







    padding: var(--spacing-sm);







    cursor: pointer;







    border-radius: var(--radius-sm);







    transition: all 0.2s ease;







    display: flex;







    align-items: center;







    justify-content: center;







}















.btn-icon:hover {







    color: var(--text-primary);







    background: var(--bg-hover);







}















.status-indicator {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







    padding: var(--spacing-sm) var(--spacing-md);







    background: var(--bg-tertiary);







    border-radius: 20px;







    font-size: 13px;







}















.status-dot {







    width: 8px;







    height: 8px;







    border-radius: 50%;







    background-color: var(--danger);







    animation: pulse 2s infinite;







}















.status-dot.connected {







    background-color: var(--success);







    animation: none;







}















@keyframes pulse {















    0%,







    100% {







        opacity: 1;







    }















    50% {







        opacity: 0.5;







    }







}















/* ============================================







   主内容区







   ============================================ */







.main-content {







    margin-top: 64px;







    padding: var(--spacing-xl);







    max-width: 1600px;







    margin-left: auto;







    margin-right: auto;







    width: 100%;







}















.tab-content {







    display: none;







    animation: fadeIn 0.3s ease;







    width: 100%;







    min-height: 500px;







}















.tab-content.active {







    display: block;







    visibility: visible;







    opacity: 1;







}















@keyframes fadeIn {







    from {







        opacity: 0;







        transform: translateY(10px);







    }















    to {







        opacity: 1;







        transform: translateY(0);







    }







}















/* ============================================







   限价单策略页面







   ============================================ */







.strategy-container {







    display: grid;







    grid-template-columns: 1fr 1fr;







    gap: var(--spacing-xl);







    align-items: start;







    max-width: 100%;







}















.strategy-left {







    max-width: 100%;







    display: flex;







    flex-direction: column;







}















.strategy-card {







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-xl);







    width: 100%;







    box-sizing: border-box;







}















.strategy-title {







    font-size: 20px;







    font-weight: 600;







    color: var(--text-primary);







    margin-bottom: var(--spacing-xl);







    padding-bottom: var(--spacing-md);







    border-bottom: 1px solid var(--border-color);







}















.strategy-form {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-lg);







    width: 100%;







}















.form-group {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-sm);







}















.form-group label {







    font-size: 13px;







    font-weight: 500;







    color: var(--text-secondary);







}















input[type="number"],







input[type="text"] {







    width: 100%;







    padding: var(--spacing-md);







    background: var(--bg-tertiary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-sm);







    color: var(--text-primary);







    font-size: 14px;







    font-family: var(--font-body);







    transition: all 0.2s ease;







}















input:focus {







    outline: none;







    border-color: var(--primary);







    background: var(--bg-hover);







}















input::placeholder {







    color: var(--text-muted);







}















.input-with-button {







    display: flex;







    gap: var(--spacing-sm);







    width: 100%;







    align-items: stretch;







}















.input-with-button input {







    flex: 1;







    min-width: 0;







}















.input-with-button button {







    flex-shrink: 0;







    white-space: nowrap;







}















.input-read-only {







    background: var(--bg-secondary);







    color: var(--text-muted);







    cursor: not-allowed;







}















.token-id-display {







    display: flex;







    gap: var(--spacing-sm);







    align-items: center;







}















.token-id-display input {







    flex: 1;







}















.btn-copy {







    background: var(--bg-tertiary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-sm);







    padding: var(--spacing-sm);







    color: var(--text-secondary);







    cursor: pointer;







    transition: all 0.2s ease;







    display: flex;







    align-items: center;







    justify-content: center;







    min-width: 36px;







    height: 36px;







}















.btn-copy:hover {







    background: var(--bg-hover);







    color: var(--primary);







    border-color: var(--primary);







}















.market-info-panel {







    background: var(--bg-tertiary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-md);







    padding: var(--spacing-lg);







    margin-top: var(--spacing-md);







    width: 100%;







    box-sizing: border-box;







}















.market-title-large {







    font-size: 18px;







    font-weight: 600;







    color: var(--primary);







    margin-bottom: var(--spacing-lg);







    padding-bottom: var(--spacing-md);







    border-bottom: 1px solid var(--border-color);







    word-break: break-word;







    overflow-wrap: break-word;







    line-height: 1.4;







    max-height: 3em;







    overflow: hidden;







    text-overflow: ellipsis;







    display: -webkit-box;







    -webkit-line-clamp: 2;







    line-clamp: 2;







    -webkit-box-orient: vertical;







}















.market-options-list {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-sm);







}















.option-btn {







    padding: var(--spacing-md) var(--spacing-lg);







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-sm);







    color: var(--text-primary);







    font-size: 14px;







    cursor: pointer;







    transition: all 0.2s ease;







    text-align: left;







    display: flex;







    align-items: center;







    justify-content: space-between;







    gap: var(--spacing-md);







    width: 100%;







    margin-bottom: var(--spacing-sm);







}















.option-btn span {







    flex: 1;







    word-break: break-word;







    overflow: hidden;







    text-overflow: ellipsis;







    white-space: nowrap;







}















.option-btn:hover {







    border-color: var(--primary);







    background: var(--bg-hover);







}















.option-btn.selected {







    border-color: var(--primary);







    background: rgba(243, 112, 33, 0.1);







    color: var(--primary);







}















.yesno-options-container {







    margin-top: var(--spacing-md);







    padding-left: var(--spacing-md);







    border-left: 2px solid var(--primary);







    width: 100%;







}















.yesno-options-container .option-btn {







    margin-left: 0;







    padding: var(--spacing-sm) var(--spacing-md);







    font-size: 13px;







}















.form-actions {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-md);







    margin-top: var(--spacing-lg);







}















.form-actions button {







    width: 100%;







}















/* ============================================







   订单簿面板







   ============================================ */







.strategy-right {







    position: relative;







}















.orderbook-panel {







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-xl);







    height: calc(100vh - 200px);







    min-height: 500px;







    display: flex;







    flex-direction: column;







    width: 100%;







    box-sizing: border-box;







}















.orderbook-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    margin-bottom: var(--spacing-lg);







    padding-bottom: var(--spacing-md);







    border-bottom: 1px solid var(--border-color);







}















.orderbook-header h3 {







    font-size: 18px;







    font-weight: 600;







    color: var(--text-primary);







    margin: 0;







}















.orderbook-content {







    flex: 1;







    overflow-y: auto;







    overflow-x: hidden;







}















.orderbook-market-title {







    font-size: 16px;







    font-weight: 600;







    color: var(--primary);







    margin-bottom: var(--spacing-lg);







    padding-bottom: var(--spacing-sm);







    border-bottom: 1px solid var(--border-color);







}















.orderbook-section {







    margin-bottom: var(--spacing-xl);







    width: 100%;







}















.orderbook-section:last-child {







    margin-bottom: 0;







}















.orderbook-section-header {







    display: flex;







    gap: var(--spacing-md);







    margin-bottom: var(--spacing-md);







    padding-bottom: var(--spacing-sm);







    border-bottom: 1px solid var(--border-color);







    font-size: 14px;







    font-weight: 500;







    align-items: center;







}















.orderbook-option {







    color: var(--text-primary);







}















.orderbook-yesno {







    color: var(--primary);







}















.orderbook-table-container {







    display: grid;







    grid-template-columns: 1fr 1fr;







    gap: var(--spacing-md);







}















.orderbook-table-wrapper {







    display: flex;







    flex-direction: column;







}















.orderbook-table {







    width: 100%;







    border-collapse: collapse;







    font-size: 13px;







}















.orderbook-table thead {







    background: var(--bg-tertiary);







}















.orderbook-table th {







    padding: var(--spacing-sm) var(--spacing-md);







    text-align: center;







    color: var(--text-secondary);







    font-size: 11px;







    font-weight: 600;







    text-transform: uppercase;







    border-bottom: 1px solid var(--border-color);







}















.orderbook-table td {







    padding: var(--spacing-sm) var(--spacing-md);







    text-align: center;







    color: var(--text-primary);







    border-bottom: 1px solid var(--border-color);







    font-size: 12px;







}















.orderbook-table {







    table-layout: fixed;







}















.orderbook-table th.orderbook-side {







    width: 25%;







}















.orderbook-table th.orderbook-price {







    width: 35%;







}















.orderbook-table th.orderbook-amount {







    width: 40%;







}















.orderbook-side.buy {







    color: var(--success);







}















.orderbook-side.sell {







    color: var(--danger);







}















.orderbook-price {







    font-weight: 500;







}















.orderbook-amount {







    color: var(--text-secondary);







}















/* ============================================







   状态栏（固定右下角弹出）







   ============================================ */







.btn-status-toggle-fixed {







    position: fixed;







    bottom: var(--spacing-xl);







    right: var(--spacing-xl);







    padding: var(--spacing-md) var(--spacing-lg);







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-md);







    color: var(--text-primary);







    font-size: 14px;







    font-weight: 500;







    cursor: pointer;







    transition: all 0.2s ease;







    display: flex;







    align-items: center;







    justify-content: center;







    gap: var(--spacing-sm);







    z-index: 998;







    box-shadow: var(--shadow-md);







}















.btn-status-toggle-fixed:hover {







    background: var(--bg-hover);







    border-color: var(--primary);







    color: var(--primary);







    transform: translateY(-5px);







}















.status-panel {







    position: fixed;







    bottom: 80px;







    right: -400px;







    width: 400px;







    height: calc(100vh - 200px);







    max-height: 600px;







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);







    z-index: 999;







    display: flex;







    flex-direction: column;







    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.3);







    overflow: hidden;







}















.status-panel.active {







    right: var(--spacing-xl);







}















.status-panel-header {







    padding: var(--spacing-lg);







    border-bottom: 1px solid var(--border-color);







    display: flex;







    justify-content: space-between;







    align-items: center;







}















.status-panel-header h3 {







    font-size: 16px;







    font-weight: 600;







    color: var(--text-primary);







}















.btn-close {







    background: transparent;







    border: none;







    color: var(--text-secondary);







    font-size: 24px;







    cursor: pointer;







    width: 32px;







    height: 32px;







    display: flex;







    align-items: center;







    justify-content: center;







    border-radius: var(--radius-sm);







    transition: all 0.2s ease;







}















.btn-close:hover {







    background: var(--bg-hover);







    color: var(--text-primary);







}















.status-panel-content {







    flex: 1;







    overflow-y: auto;







    overflow-x: hidden;







    padding: var(--spacing-md);







    scrollbar-width: thin;







    scrollbar-color: var(--bg-tertiary) var(--bg-secondary);







}















.status-log {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-sm);







}















.log-item {







    padding: var(--spacing-sm) var(--spacing-md);







    background: var(--bg-tertiary);







    border-radius: var(--radius-sm);







    font-size: 13px;







    display: flex;







    gap: var(--spacing-md);







    align-items: flex-start;







    margin-bottom: var(--spacing-sm);







    word-wrap: break-word;







    animation: slideInLog 0.3s ease;







}















@keyframes slideInLog {







    from {







        opacity: 0;







        transform: translateX(10px);







    }















    to {







        opacity: 1;







        transform: translateX(0);







    }







}















.log-time {







    color: var(--text-muted);







    font-size: 12px;







    white-space: nowrap;







    min-width: 70px;







}















.log-message {







    color: var(--text-secondary);







    flex: 1;







    word-break: break-word;







    line-height: 1.5;







    overflow-wrap: break-word;







}















.log-item.success .log-message {







    color: var(--success);







}















.log-item.error .log-message {







    color: var(--danger);







}















.log-item.warning .log-message {







    color: var(--warning);







}















/* ============================================







   按钮样式







   ============================================ */







button {







    font-family: var(--font-body);







    font-weight: 500;







}















.btn-primary {







    background: var(--primary);







    color: var(--text-inverse);







    border: none;







    padding: var(--spacing-md) var(--spacing-xl);







    border-radius: var(--radius-sm);







    font-size: 14px;







    font-weight: 600;







    cursor: pointer;







    transition: all 0.2s ease;







}















.btn-primary:hover {







    background: var(--primary-hover);







    transform: translateY(-1px);







    box-shadow: 0 4px 12px rgba(243, 112, 33, 0.3);







}















.btn-danger {







    background: var(--danger);







    color: white;







    border: none;







    padding: var(--spacing-md) var(--spacing-xl);







    border-radius: var(--radius-sm);







    font-size: 14px;







    font-weight: 600;







    cursor: pointer;







    transition: all 0.2s ease;







}















.btn-danger:hover {







    background: #DC2626;







    transform: translateY(-1px);







}















.btn-secondary {







    background: var(--bg-tertiary);







    color: var(--text-primary);







    border: 1px solid var(--border-color);







    padding: var(--spacing-md) var(--spacing-lg);







    border-radius: var(--radius-sm);







    font-size: 14px;







    font-weight: 500;







    cursor: pointer;







    transition: all 0.2s ease;







}















.btn-secondary:hover {







    background: var(--bg-hover);







    border-color: var(--primary);







    color: var(--primary);







}















.btn-sm {







    padding: var(--spacing-sm) var(--spacing-md);







    font-size: 13px;







}















/* ============================================







   交易量排名







   ============================================ */







.ranking-container {







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-xl);







}















.ranking-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    margin-bottom: var(--spacing-lg);







    flex-wrap: wrap;







    gap: var(--spacing-md);







}















.ranking-header h2 {







    font-size: 20px;







    font-weight: 600;







    color: var(--text-primary);







}















.ranking-controls {







    display: flex;







    gap: var(--spacing-md);







    align-items: center;







    flex-wrap: wrap;







}















.ranking-controls select {







    padding: var(--spacing-sm) var(--spacing-md);







    background: var(--bg-tertiary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-sm);







    color: var(--text-primary);







    font-size: 14px;







    cursor: pointer;







}















.view-toggle {







    display: flex;







    background: var(--bg-tertiary);







    border-radius: var(--radius-sm);







    padding: 2px;







    border: 1px solid var(--border-color);







}















.view-btn {







    background: transparent;







    border: none;







    color: var(--text-secondary);







    padding: var(--spacing-sm) var(--spacing-md);







    border-radius: var(--radius-sm);







    font-size: 13px;







    font-weight: 500;







    cursor: pointer;







    transition: all 0.2s ease;







}















.view-btn.active {







    background: var(--primary);







    color: var(--text-inverse);







}

.global-radar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.global-radar-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.global-radar-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 12px;
}

.global-radar-meta #globalRadarLastUpdated {
    color: var(--text-primary);
}

.global-radar-content {
    margin-top: 14px;
}

.global-radar-container .view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.global-radar-controls select {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}

.global-radar-whale-table .type-col,
.global-radar-whale-table .shares-col,
.global-radar-whale-table .price-col,
.global-radar-whale-table .amount-col,
.global-radar-whale-table .time-col,
.global-radar-whale-table .trader-col,
.global-radar-whale-table .option-col {
    white-space: nowrap;
}

.global-radar-whale-table .type-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-color);
}

.global-radar-whale-table .type-badge.buy {
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.25);
}

.global-radar-whale-table .type-badge.sell {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
}

.global-radar-whale-table .time-cell {
    color: var(--text-secondary);
}

.global-radar-whale-table .trader-cell {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    color: var(--text-secondary);
}

.global-radar-whale-table .outcome-cell {
    font-weight: 600;
}















.ranking-info {







    display: flex;







    justify-content: space-between;







    font-size: 12px;







    color: var(--text-muted);







    margin-bottom: var(--spacing-md);







    padding: 0 var(--spacing-sm);







}















.ranking-view {







    display: none;







}















.ranking-view.active {







    display: block;







}















.table-container {







    overflow-x: auto;







    border-radius: var(--radius-md);







    border: 1px solid var(--border-color);







}















.data-table {







    width: 100%;







    border-collapse: collapse;







    background: var(--bg-card);







}















.data-table thead {







    background: var(--bg-tertiary);







}















.data-table th {







    text-align: left;







    padding: var(--spacing-md) var(--spacing-lg);







    color: var(--text-secondary);







    font-size: 12px;







    font-weight: 600;







    text-transform: uppercase;







    letter-spacing: 0.5px;







    border-bottom: 1px solid var(--border-color);







}















.data-table td {







    padding: var(--spacing-md) var(--spacing-lg);







    color: var(--text-primary);







    font-size: 14px;







    border-bottom: 1px solid var(--border-color);







    max-width: 300px;







    overflow: hidden;







    text-overflow: ellipsis;







    white-space: nowrap;







}















.data-table td.market-col {







    /* 甯傚満鏍囬鍏佽瀹屾暣鎹㈣灞曠ず锛氫笉瑕?ellipsis 瑁佸壀 */







    max-width: none;







    white-space: normal;







    word-break: break-word;







    overflow: visible;







    text-overflow: clip;







}















.data-table tbody tr:hover {







    background: var(--bg-hover);







}















.empty-state {







    text-align: center;







    padding: var(--spacing-2xl);







    color: var(--text-muted);







}















.loading-spinner {







    width: 20px;







    height: 20px;







    border: 2px solid var(--border-color);







    border-top-color: var(--primary);







    border-radius: 50%;







    animation: spin 0.8s linear infinite;







    display: inline-block;







    margin-right: var(--spacing-sm);







}















/* 美观的加载状态样式（和钱包分析一致） */







.empty-state.search-prompt {







    display: flex;







    flex-direction: column;







    align-items: center;







    justify-content: center;







    padding: var(--spacing-2xl) var(--spacing-xl);







    min-height: 400px;







}















.empty-state.search-prompt svg {







    width: 64px;







    height: 64px;







    color: var(--primary);







    opacity: 0.6;







    margin-bottom: var(--spacing-lg);







    animation: pulse 2s ease-in-out infinite;







}















.empty-state.search-prompt .loading-icon {







    animation: spin 1.5s linear infinite;







}















.empty-state.search-prompt h3 {







    font-size: 18px;







    font-weight: 600;







    color: var(--text-primary);







    margin: var(--spacing-md) 0 var(--spacing-sm);







}















.empty-state.search-prompt p {







    font-size: 14px;







    color: var(--text-secondary);







    margin: 0;







}















.spinner-large {







    width: 48px;







    height: 48px;







    border: 4px solid rgba(243, 112, 33, 0.1);







    border-top-color: var(--primary);







    border-radius: 50%;







    animation: spin 0.8s linear infinite;







    margin-bottom: var(--spacing-md);







}















@keyframes spin {







    to {







        transform: rotate(360deg);







    }







}















@keyframes pulse {







    0%, 100% {







        opacity: 0.6;







    }







    50% {







        opacity: 1;







    }







}















.chart-container {







    height: 300px;







    position: relative;







    width: 100%;







    padding: var(--spacing-md);







}















.fee-curve-section .chart-container {







    height: 280px;







    padding: var(--spacing-sm) var(--spacing-md);







}















/* ============================================







   手续费计算器







   ============================================ */







.fee-calculator-page {







    width: 100%;







    max-width: 1400px;







    margin: 0 auto;







    padding-top: 0;







}















/* 页面头部 */







.fee-calc-page-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    margin-bottom: var(--spacing-xl);







    padding-bottom: var(--spacing-lg);







    border-bottom: 1px solid var(--border-color);







}















.fee-calc-page-title {







    display: flex;







    align-items: center;







    gap: var(--spacing-md);







}















.fee-calc-page-title .calc-icon {







    color: var(--primary);







    width: 24px;







    height: 24px;







}















.fee-calc-page-title h1 {







    font-size: 24px;







    font-weight: 600;







    color: var(--text-primary);







    margin: 0;







}















.fee-calc-lang-selector {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







    padding: var(--spacing-sm) var(--spacing-md);







    background: var(--bg-tertiary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-sm);







    color: var(--text-primary);







    font-size: 14px;







    cursor: pointer;







    transition: all 0.2s ease;







}















.fee-calc-lang-selector:hover {







    background: var(--bg-hover);







    border-color: var(--primary);







}















.fee-calc-lang-selector svg {







    width: 16px;







    height: 16px;







    color: var(--text-secondary);







}















/* 模式切换按钮 */







.fee-calc-mode-buttons {







    display: flex;







    gap: var(--spacing-md);







    margin-top: 0;







    margin-bottom: var(--spacing-xl);







}















.mode-toggle-btn {







    flex: 1;







    padding: var(--spacing-lg) var(--spacing-xl);







    background: var(--bg-tertiary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-md);







    color: var(--text-secondary);







    font-size: 16px;







    font-weight: 500;







    cursor: pointer;







    transition: all 0.2s ease;







    text-align: center;







}















.mode-toggle-btn:hover {







    background: var(--bg-hover);







    border-color: var(--border-light);







}















.mode-toggle-btn.active {







    background: var(--primary);







    color: var(--text-inverse);







    border-color: var(--primary);







}















.fee-calculator-wrapper {







    display: grid;







    grid-template-columns: 450px 1fr;







    gap: var(--spacing-xl);







    width: 100%;







    align-items: start;







}

.carnival-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-xl);
    width: 100%;
    align-items: start;
}

.carnival-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.cache-info {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
}

.carnival-meta {
    display: grid;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.carnival-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.carnival-meta-label {
    color: var(--text-secondary);
    font-size: 13px;
}

.carnival-meta-value {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 13px;
}

.carnival-rule-list {
    margin: var(--spacing-sm) 0 var(--spacing-md);
    padding-left: 18px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.carnival-categories {
    display: grid;
    gap: var(--spacing-sm);
}

.carnival-category {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.02);
}

.carnival-category-title {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.carnival-category-desc {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.carnival-input textarea {
    width: 100%;
    resize: vertical;
    min-height: 140px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 12px;
    color: var(--text-primary);
    outline: none;
}

.carnival-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
}

.carnival-hint {
    margin-top: var(--spacing-sm);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

#carnivalResult {
    margin-top: var(--spacing-lg);
    display: grid;
    gap: var(--spacing-md);
    max-height: 520px;
    overflow-y: auto;
    padding-right: 2px;
}

.carnival-wallet-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.carnival-toggle-btn {
    white-space: nowrap;
}

.carnival-details {
    display: none;
    margin-top: var(--spacing-md);
}

.carnival-details.open {
    display: block;
}

.carnival-wallet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.carnival-wallet-label {
    color: var(--text-secondary);
    font-size: 12px;
}

.carnival-wallet-address {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 700;
    color: var(--text-primary);
}

.carnival-wallet-summary {
    display: flex;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.carnival-summary-label {
    color: var(--text-secondary);
    font-size: 12px;
}

.carnival-summary-value {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.carnival-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

.carnival-mark.ok {
    background: rgba(16, 185, 129, 0.15);
    color: var(--success);
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.carnival-mark.bad {
    background: rgba(239, 68, 68, 0.15);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.carnival-table-container {
    overflow-x: auto;
}

.carnival-table th:nth-child(2),
.carnival-table th:nth-child(3) {
    text-align: right;
}

.carnival-table th:nth-child(4),
.carnival-table th:nth-child(5) {
    text-align: center;
}

.carnival-table th,
.carnival-table td {
    white-space: nowrap;
}

.carnival-td-date {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: var(--text-secondary);
}

.carnival-td-num {
    text-align: right;
}

.carnival-td-mark {
    text-align: center;
}

@media (max-width: 980px) {
    .carnival-container {
        grid-template-columns: 1fr;
    }

    #carnivalResult {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }
}















.fee-calc-left {







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-lg);







}















.fee-calc-info-banner {







    margin-bottom: var(--spacing-lg);







    padding: var(--spacing-sm) var(--spacing-md);







    background: var(--bg-tertiary);







    border-radius: var(--radius-sm);







    text-align: center;







}















.fee-calc-info-banner .info-text {







    color: var(--text-muted);







    font-size: 12px;







}















.fee-calc-form {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-lg);







}















.fee-calc-form .form-group {







    margin-bottom: 0;







}















.fee-calc-form .form-input {







    width: 100%;







    padding: var(--spacing-sm) var(--spacing-md);







    background: var(--bg-tertiary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-sm);







    color: var(--text-primary);







    font-size: 14px;







    transition: all 0.2s ease;







    margin-bottom: var(--spacing-xs);







}















.fee-calc-form .form-input:focus {







    outline: none;







    border-color: var(--primary);







    background: var(--bg-hover);







}















.form-hint {







    font-size: 11px;







    color: var(--text-muted);







    margin-top: var(--spacing-xs);







}















.input-with-unit {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







}















.input-with-unit .form-input {







    flex: 1;







}















.input-unit {







    color: var(--text-secondary);







    font-size: 13px;







    min-width: 28px;







}















.radio-group {







    display: flex;







    gap: var(--spacing-sm);







    background: var(--bg-tertiary);







    padding: 3px;







    border-radius: var(--radius-md);







}















.radio-btn {







    flex: 1;







    padding: var(--spacing-sm) var(--spacing-md);







    background: transparent;







    border: none;







    color: var(--text-secondary);







    font-size: 13px;







    font-weight: 500;







    border-radius: var(--radius-sm);







    cursor: pointer;







    transition: all 0.2s ease;







}















.radio-btn.active {







    background: var(--success);







    color: white;







}















.radio-btn:not(.active) {







    background: transparent;







    color: var(--text-secondary);







}















/* 输入框和滑块组合 */







.input-with-slider {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-md);







}















.input-with-slider .input-with-unit {







    margin-bottom: 0;







}















/* 滑块样式 */







.form-slider {







    width: 100%;







    height: 6px;







    background: var(--bg-tertiary);







    border-radius: 3px;







    outline: none;







    -webkit-appearance: none;







    appearance: none;







    cursor: pointer;







}















.form-slider::-webkit-slider-thumb {







    -webkit-appearance: none;







    appearance: none;







    width: 18px;







    height: 18px;







    background: white;







    border-radius: 50%;







    cursor: pointer;







    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);







    transition: all 0.2s ease;







}















.form-slider::-webkit-slider-thumb:hover {







    transform: scale(1.1);







    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);







}















.form-slider::-moz-range-thumb {







    width: 18px;







    height: 18px;







    background: white;







    border-radius: 50%;







    border: none;







    cursor: pointer;







    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);







    transition: all 0.2s ease;







}















.form-slider::-moz-range-thumb:hover {







    transform: scale(1.1);







    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);







}















.form-slider::-ms-thumb {







    width: 18px;







    height: 18px;







    background: white;







    border-radius: 50%;







    cursor: pointer;







    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);







}















.form-slider::-ms-track {







    width: 100%;







    height: 6px;







    background: var(--bg-tertiary);







    border-radius: 3px;







    border: none;







}















.fee-calc-right {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-lg);







}















.fee-curve-section {







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-lg);







    margin-bottom: var(--spacing-lg);







}















.fee-curve-section h3 {







    font-size: 14px;







    font-weight: 600;







    color: var(--text-primary);







    margin-bottom: var(--spacing-md);







    padding-bottom: var(--spacing-sm);







    border-bottom: 1px solid var(--border-color);







}















.curve-info {







    margin-top: var(--spacing-md);







    padding-top: var(--spacing-md);







    border-top: 1px solid var(--border-color);







}















.curve-info p {







    font-size: 11px;







    color: var(--text-muted);







    margin: var(--spacing-xs) 0;







    line-height: 1.6;







    font-family: 'Courier New', monospace;







}















.curve-info p:first-child {







    color: var(--text-secondary);







    font-weight: 500;







}















.fee-results {







    display: grid;







    grid-template-columns: repeat(2, 1fr);







    gap: var(--spacing-md);







    margin-top: var(--spacing-md);







}















/* 按份数模式：4个卡片布局 */







#sharesModeResults.fee-results {







    grid-template-columns: repeat(2, 1fr);







}















.result-card {







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-md);







    padding: var(--spacing-md) var(--spacing-lg);







    text-align: center;







}















.result-card.result-best {







    border-left: 3px solid var(--success);







}















.result-card.result-best .result-value {







    color: var(--success);







}















.result-card.result-worst {







    border-left: 3px solid var(--warning);







}















.result-card.result-worst .result-value {







    color: var(--primary);







}















.result-label {







    font-size: 11px;







    color: var(--text-muted);







    text-transform: uppercase;







    letter-spacing: 0.5px;







    margin-bottom: var(--spacing-sm);







}















.result-value {







    font-size: 20px;







    font-weight: 600;







    margin-bottom: var(--spacing-xs);







}















.result-ratio {







    font-size: 12px;







    color: var(--text-secondary);







}















/* 额外信息显示 */







.fee-extra-info {







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-md);







    padding: var(--spacing-md) var(--spacing-lg);







    margin-top: var(--spacing-md);







    display: grid;







    grid-template-columns: repeat(2, 1fr);







    gap: var(--spacing-lg);







}















.extra-info-item {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-xs);







}















.extra-info-label {







    font-size: 11px;







    color: var(--text-muted);







    text-transform: uppercase;







    letter-spacing: 0.5px;







}















.extra-info-value {







    font-size: 14px;







    color: var(--text-primary);







    font-weight: 500;







    font-family: 'Courier New', monospace;







}















/* ============================================







   历史订单







   ============================================ */







.orders-container {







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-xl);







    min-height: 400px;







    width: 100%;







    box-sizing: border-box;







}















.orders-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    margin-bottom: var(--spacing-xl);







}















.orders-header h2 {







    font-size: 20px;







    font-weight: 600;







    color: var(--text-primary);







}















.section-mb {







    margin-bottom: var(--spacing-xl);







}















.section-title {







    font-size: 16px;







    font-weight: 600;







    color: var(--text-primary);







    margin-bottom: var(--spacing-md);







    padding-left: var(--spacing-md);







    border-left: 3px solid var(--primary);







}















/* ============================================







   Profile







   ============================================ */







.profile-container {







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-xl);







    min-height: 400px;







    width: 100%;







    box-sizing: border-box;







}















.profile-header {







    margin-bottom: var(--spacing-xl);







}















.profile-header h2 {







    font-size: 20px;







    font-weight: 600;







    color: var(--text-primary);







}















.balance-summary {







    background: var(--bg-tertiary);







    padding: var(--spacing-xl);







    border-radius: var(--radius-md);







    margin-bottom: var(--spacing-xl);







    text-align: center;







}















.balance-label {







    font-size: 12px;







    color: var(--text-muted);







    text-transform: uppercase;







    letter-spacing: 1px;







    margin-bottom: var(--spacing-sm);







}















.balance-value {







    font-size: 48px;







    font-weight: 300;







    color: var(--primary);







    letter-spacing: -2px;







}















/* ============================================







   空白页面







   ============================================ */







.empty-page {







    display: flex;







    align-items: center;







    justify-content: center;







    min-height: 60vh;







}















.empty-content {







    text-align: center;







}















.empty-content h2 {







    font-size: 24px;







    font-weight: 600;







    color: var(--text-primary);







    margin-bottom: var(--spacing-md);







}















.empty-content p {







    color: var(--text-muted);







    font-size: 14px;







}















/* ============================================







   模态框







   ============================================ */







.modal {







    display: none;







    position: fixed;







    z-index: 10000;







    left: 0;







    top: 0;







    width: 100%;







    height: 100%;







    background-color: rgba(0, 0, 0, 0.7);







    backdrop-filter: blur(4px);







}















.modal.active {







    display: flex;







    align-items: center;







    justify-content: center;







}















.modal-content {







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    width: 90%;







    max-width: 500px;







    max-height: 90vh;







    overflow-y: auto;







    box-shadow: var(--shadow-lg);







}















.modal-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    padding: var(--spacing-lg) var(--spacing-xl);







    border-bottom: 1px solid var(--border-color);







}















.modal-header h2 {







    font-size: 18px;







    font-weight: 600;







    color: var(--text-primary);







}















.modal-body {







    padding: var(--spacing-xl);







}















.modal-body .form-group {







    margin-bottom: var(--spacing-lg);







}















.modal-body .form-actions {







    display: flex;







    gap: var(--spacing-md);







    margin-top: var(--spacing-xl);







    padding-top: var(--spacing-lg);







    border-top: 1px solid var(--border-color);







}















.modal-body .form-actions button {







    flex: 1;







}















/* ============================================







   Toast 通知







   ============================================ */







.toast {







    position: fixed;







    bottom: var(--spacing-xl);







    right: var(--spacing-xl);







    padding: var(--spacing-lg) var(--spacing-xl);







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-md);







    box-shadow: var(--shadow-lg);







    z-index: 2000;







    display: none;







    color: var(--text-primary);







    font-weight: 500;







    min-width: 300px;







    animation: slideInRight 0.3s ease;







}















.toast.show {







    display: block;







}















.toast.success {







    border-left: 4px solid var(--success);







}















.toast.error {







    border-left: 4px solid var(--danger);







}















.toast.warning {







    border-left: 4px solid var(--warning);







}















@keyframes slideInRight {







    from {







        transform: translateX(100%);







        opacity: 0;







    }















    to {







        transform: translateX(0);







        opacity: 1;







    }







}















/* ============================================







   响应式设计







   ============================================ */







@media (max-width: 1200px) {







    .strategy-container {







        grid-template-columns: 1fr;







    }















    .status-panel {







        width: 100%;







        right: -100%;







    }















    .fee-calculator-wrapper {







        grid-template-columns: 1fr;







    }







}















@media (max-width: 768px) {







    .header {







        flex-wrap: wrap;







        height: auto;







        padding: var(--spacing-md);







    }















    .header-nav {







        order: 3;







        width: 100%;







        margin: var(--spacing-md) 0 0 0;







        overflow-x: auto;







        padding-bottom: var(--spacing-sm);







        justify-content: flex-start;







    }















    .main-content {







        margin-top: 120px;







        padding: var(--spacing-md);







    }















    .strategy-container {







        grid-template-columns: 1fr;







    }















    .strategy-left {







        max-width: 100%;







    }















    .status-panel {







        width: 100%;







        right: -100%;







    }















    .status-panel.active {







        right: 0;







    }















    .fee-results {







        grid-template-columns: 1fr;







    }















    .data-table td {







        max-width: 150px;







        font-size: 12px;







        padding: var(--spacing-sm) var(--spacing-md);







    }







}















/* ============================================







   滚动条美化







   ============================================ */







::-webkit-scrollbar {







    width: 8px;







    height: 8px;







}















::-webkit-scrollbar-track {







    background: var(--bg-secondary);







}















::-webkit-scrollbar-thumb {







    background: var(--bg-tertiary);







    border-radius: 4px;







}















::-webkit-scrollbar-thumb:hover {







    background: var(--border-light);







}















/* ============================================







   订单流排名







   ============================================ */







.order-flow-container {







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-xl);







}















.order-flow-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    margin-bottom: var(--spacing-lg);







    flex-wrap: wrap;







    gap: var(--spacing-md);







}















.order-flow-header h2 {







    font-size: 20px;







    font-weight: 600;







    color: var(--text-primary);







}















.order-flow-controls {







    display: flex;







    gap: var(--spacing-md);







    align-items: center;







    flex-wrap: wrap;







}















.order-flow-controls select {







    padding: var(--spacing-sm) var(--spacing-md);







    background: var(--bg-tertiary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-sm);







    color: var(--text-primary);







    font-size: 14px;







    cursor: pointer;







}















.order-flow-info {







    display: flex;







    justify-content: space-between;







    font-size: 12px;







    color: var(--text-muted);







    margin-bottom: var(--spacing-md);







    padding: 0 var(--spacing-sm);







}















.order-flow-view {







    display: block;







}















.order-flow-table {







    width: 100%;







    border-collapse: collapse;







    background: var(--bg-card);







}















.order-flow-table thead {







    background: var(--bg-tertiary);







}















.order-flow-table th {







    text-align: left;







    padding: var(--spacing-md) var(--spacing-lg);







    color: var(--text-secondary);







    font-size: 12px;







    font-weight: 600;







    text-transform: uppercase;







    letter-spacing: 0.5px;







    border-bottom: 1px solid var(--border-color);







}















.order-flow-table td {







    padding: var(--spacing-md) var(--spacing-lg);







    color: var(--text-primary);







    font-size: 14px;







    border-bottom: 1px solid var(--border-color);







}















.order-flow-row {







    transition: background 0.2s ease;







}















.order-flow-row:hover {







    background: var(--bg-hover);







}















.order-flow-detail-row {







    background: var(--bg-secondary);







}















.order-flow-detail-row .detail-cell {







    padding: var(--spacing-lg);







    border-bottom: 2px solid var(--border-color);







}















.market-title-row {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







}















.market-title {







    flex: 1;







    color: var(--text-primary);







    font-weight: 500;







}















/* Order flow / Volume ranking: don't clamp title to 200px; use available cell width */







.order-flow-table td.market-col,







.ranking-table td.market-col {







    max-width: none !important;







}















.order-flow-table td.market-col .market-title,







.ranking-table td.market-col .market-title {







    max-width: 100% !important;







}















.btn-expand {







    background: transparent;







    border: none;







    color: var(--text-secondary);







    cursor: pointer;







    padding: var(--spacing-xs) var(--spacing-sm);







    border-radius: var(--radius-sm);







    font-size: 12px;







    transition: all 0.2s ease;







    min-width: 24px;







    height: 24px;







    display: flex;







    align-items: center;







    justify-content: center;







}















.btn-expand:hover {







    background: var(--bg-hover);







    color: var(--primary);







}















.btn-expand.expanded {







    color: var(--primary);







}















.rank-col {







    width: 60px;







    text-align: center;







}















.rank-badge {







    display: inline-block;







    width: 32px;







    height: 32px;







    line-height: 32px;







    text-align: center;







    border-radius: var(--radius-sm);







    background: var(--bg-tertiary);







    color: var(--text-primary);







    font-weight: 600;







    font-size: 14px;







}















.rank-badge.rank-gold {







    background: linear-gradient(135deg, #FFD700, #FFA500);







    color: var(--text-inverse);







}















.rank-badge.rank-silver {







    background: linear-gradient(135deg, #C0C0C0, #808080);







    color: var(--text-inverse);







}















.rank-badge.rank-bronze {







    background: linear-gradient(135deg, #CD7F32, #8B4513);







    color: var(--text-inverse);







}















.market-col {







    min-width: 240px;







    max-width: none;







}















.orders-col,







.traders-col {







    text-align: right;







    width: 120px;







}















.total-orders {







    font-weight: 600;







    color: var(--primary);







    font-size: 16px;







}















.unique-traders {







    color: var(--text-primary);







    font-size: 14px;







}















.action-col {







    width: 100px;







    text-align: center;







}

.ranking-table .action-col,
.order-flow-table .action-col {
    width: 140px;
}

.action-buttons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}















.order-flow-detail {







    padding: var(--spacing-md);







}















.detail-section {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-md);







}















/* 子市场分组样式 */







.sub-market-group {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-sm);







    padding: var(--spacing-md);







    background: rgba(99, 102, 241, 0.05);







    border: 1px solid rgba(99, 102, 241, 0.2);







    border-radius: var(--radius-md);







    margin-bottom: var(--spacing-sm);







}















.sub-market-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    margin-bottom: var(--spacing-xs);







    padding-bottom: var(--spacing-xs);







    border-bottom: 1px solid rgba(255, 255, 255, 0.1);







}















.sub-market-title {







    font-weight: 600;







    font-size: 14px;







    color: #6366F1;







}















.sub-market-total {







    font-size: 12px;







    color: var(--text-secondary);







}















.sub-market-options {







    display: flex;







    gap: var(--spacing-md);







    flex-wrap: wrap;







}















.detail-item {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-xs);







    padding: var(--spacing-md);







    border-radius: var(--radius-sm);







    min-width: 150px;







    flex: 0 0 auto;







}















.detail-item .detail-label {







    font-weight: 600;







    font-size: 13px;







    margin-bottom: 4px;







}















.detail-item .detail-value {







    font-size: 16px;







    font-weight: 600;







    color: var(--text-primary);







}















.detail-item .detail-traders {







    font-size: 12px;







    color: var(--text-secondary);







    margin-top: 2px;







}















.detail-item.yes {







    background: rgba(16, 185, 129, 0.1);







    border: 1px solid rgba(16, 185, 129, 0.3);







}















.detail-item.no {







    background: rgba(239, 68, 68, 0.1);







    border: 1px solid rgba(239, 68, 68, 0.3);







}















.detail-item.option {







    background: rgba(99, 102, 241, 0.1);







    border: 1px solid rgba(99, 102, 241, 0.3);







}















.detail-item.option .detail-label {







    color: #6366F1;







}















.btn-mini {







    padding: 2px 8px;







    font-size: 11px;







    background: var(--bg-tertiary);







    border: 1px solid var(--border-color);







    border-radius: 4px;







    color: var(--text-secondary);







    cursor: pointer;







    transition: all 0.2s ease;







    margin-top: 4px;







}















.btn-mini:hover {







    background: var(--accent-primary);







    color: white;







    border-color: var(--accent-primary);







}















/* 美化展开按钮 */







.btn-expand {







    display: inline-flex;







    align-items: center;







    gap: 4px;







    padding: 4px 10px;







    font-size: 12px;







    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);







    border: 1px solid var(--border-color);







    border-radius: 6px;







    color: var(--text-secondary);







    cursor: pointer;







    transition: all 0.2s ease;







    margin-left: 8px;







}















.btn-expand:hover {







    background: linear-gradient(135deg, var(--accent-primary) 0%, #7C3AED 100%);







    color: white;







    border-color: var(--accent-primary);







    transform: translateY(-1px);







    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);







}















.btn-expand.expanded {







    background: linear-gradient(135deg, var(--accent-primary) 0%, #7C3AED 100%);







    color: white;







    border-color: var(--accent-primary);







}















.btn-expand .expand-icon {







    font-weight: bold;







    font-size: 14px;







    line-height: 1;







}















.btn-expand .expand-text {







    font-size: 11px;







}















/* 分类市场选项样式 */







.detail-item.categorical-item {







    position: relative;







    padding-left: 16px;







}















.detail-item.categorical-item::before {







    content: '';







    position: absolute;







    left: 0;







    top: 50%;







    transform: translateY(-50%);







    width: 4px;







    height: 60%;







    border-radius: 2px;







}















.detail-item.categorical-item.yes::before {







    background: linear-gradient(180deg, #10B981 0%, #059669 100%);







}















.detail-item.categorical-item.no::before {







    background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%);







}















.detail-item.categorical-item .detail-label {







    font-size: 13px;







    font-weight: 600;







}















.detail-label {







    font-size: 12px;







    font-weight: 600;







    text-transform: uppercase;







    letter-spacing: 0.5px;







}















.detail-item.yes .detail-label {







    color: #10B981;







}















.detail-item.no .detail-label {







    color: #EF4444;







}















.detail-value {







    font-size: 18px;







    font-weight: 700;







    color: var(--text-primary);







}















.detail-traders {







    font-size: 12px;







    color: var(--text-secondary);







}















/* ============================================







   市场监控样式







   ============================================ */







.market-monitor-container {







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-xl);







    min-height: 600px;







}















.market-monitor-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    margin-bottom: var(--spacing-xl);







    flex-wrap: wrap;







    gap: var(--spacing-md);







    padding-bottom: var(--spacing-lg);







    border-bottom: 1px solid var(--border-color);







}















.market-monitor-header .section-title {







    font-size: 24px;







    font-weight: 700;







    color: var(--text-primary);







    margin: 0;







}















.market-monitor-controls {







    display: flex;







    align-items: center;







    gap: var(--spacing-md);







    flex-wrap: wrap;







}

.market-alert-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.market-alert-volume {
    width: 120px;
    accent-color: var(--primary);
}

.market-alert-volume-value {
    min-width: 44px;
    color: var(--text-secondary);
    font-size: 13px;
}















.filter-group {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







}















.filter-group label {







    font-size: 14px;







    color: var(--text-secondary);







    font-weight: 500;







}















.filter-group select {







    background: var(--bg-tertiary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-sm);







    padding: var(--spacing-sm) var(--spacing-md);







    color: var(--text-primary);







    font-size: 14px;







    cursor: pointer;







    transition: all 0.2s;







}

.filter-group select option {
    color: #111;
    background: #fff;
}















.filter-group select:hover {







    border-color: var(--primary);







    background: var(--bg-hover);







}















.filter-group select:focus {







    outline: none;







    border-color: var(--primary);







    box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.1);







}















.auto-refresh-toggle {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







}















.auto-refresh-toggle label {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







    cursor: pointer;







    font-size: 14px;







    color: var(--text-secondary);







}















.auto-refresh-toggle input[type="checkbox"] {







    width: 18px;







    height: 18px;







    cursor: pointer;







    accent-color: var(--primary);







}















.market-monitor-stats {







    display: grid;







    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));







    gap: var(--spacing-md);







    margin-bottom: var(--spacing-xl);







}















.stat-card {







    background: var(--bg-tertiary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-md);







    padding: var(--spacing-lg);







    text-align: center;







    transition: all 0.2s;







}















.stat-card:hover {







    border-color: var(--primary);







    transform: translateY(-2px);







    box-shadow: var(--shadow-md);







}















.stat-label {







    font-size: 12px;







    color: var(--text-secondary);







    text-transform: uppercase;







    letter-spacing: 0.5px;







    margin-bottom: var(--spacing-sm);







    font-weight: 600;







}















.stat-value {







    font-size: 24px;







    font-weight: 700;







    color: var(--primary);







}















.market-monitor-content {







    position: relative;







    min-height: 400px;







}















.market-list {







    display: grid;







    gap: var(--spacing-md);







}















.market-card {







    background: var(--bg-tertiary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-md);







    padding: var(--spacing-lg);







    transition: all 0.3s;







    cursor: pointer;







    position: relative;







    overflow: hidden;







}















.market-card::before {







    content: '';







    position: absolute;







    top: 0;







    left: 0;







    width: 4px;







    height: 100%;







    background: var(--primary);







    transform: scaleY(0);







    transition: transform 0.3s;







}















.market-card:hover {







    border-color: var(--primary);







    transform: translateX(4px);







    box-shadow: var(--shadow-md);







}















.market-card:hover::before {







    transform: scaleY(1);







}















.market-card-header {







    display: flex;







    justify-content: space-between;







    align-items: flex-start;







    margin-bottom: var(--spacing-md);







    gap: var(--spacing-md);







}















.market-card-title {







    flex: 1;







    font-size: 16px;







    font-weight: 600;







    color: var(--text-primary);







    line-height: 1.4;







    margin: 0;







}















.market-card-badge {







    display: inline-flex;







    align-items: center;







    gap: var(--spacing-xs);







    padding: var(--spacing-xs) var(--spacing-sm);







    border-radius: var(--radius-sm);







    font-size: 12px;







    font-weight: 600;







    white-space: nowrap;







}















.market-card-badge.binary {







    background: rgba(16, 185, 129, 0.2);







    color: #10B981;







    border: 1px solid rgba(16, 185, 129, 0.3);







}















.market-card-badge.categorical {







    background: rgba(59, 130, 246, 0.2);







    color: #3B82F6;







    border: 1px solid rgba(59, 130, 246, 0.3);







}















.market-card-badge.activated {







    background: rgba(16, 185, 129, 0.2);







    color: #10B981;







    border: 1px solid rgba(16, 185, 129, 0.3);







}















.market-card-badge.resolved {







    background: rgba(239, 68, 68, 0.2);







    color: #EF4444;







    border: 1px solid rgba(239, 68, 68, 0.3);







}















.market-card-info {







    display: grid;







    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));







    gap: var(--spacing-md);







    margin-bottom: var(--spacing-md);







}















.market-info-item {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-xs);







}















.market-info-label {







    font-size: 12px;







    color: var(--text-secondary);







    font-weight: 500;







}















.market-info-value {







    font-size: 14px;







    color: var(--text-primary);







    font-weight: 600;







}















.market-card-footer {







    display: flex;







    justify-content: space-between;







    align-items: center;







    padding-top: var(--spacing-md);







    border-top: 1px solid var(--border-color);







}















.market-card-time {







    font-size: 12px;







    color: var(--text-muted);







    display: flex;







    align-items: center;







    gap: var(--spacing-xs);







}















.market-card-actions {







    display: flex;







    gap: var(--spacing-sm);







}















.btn-trade {







    background: var(--primary);







    color: white;







    border: none;







    border-radius: var(--radius-sm);







    padding: var(--spacing-sm) var(--spacing-lg);







    font-size: 14px;







    font-weight: 600;







    cursor: pointer;







    transition: all 0.2s;







    display: inline-flex;







    align-items: center;







    gap: var(--spacing-xs);







}















.btn-trade:hover {







    background: var(--primary-hover);







    transform: translateY(-1px);







    box-shadow: var(--shadow-sm);







}















.btn-trade:active {







    transform: translateY(0);







}















.btn-trade svg {







    width: 14px;







    height: 14px;







}















.loading-spinner {







    display: flex;







    flex-direction: column;







    align-items: center;







    justify-content: center;







    padding: var(--spacing-2xl);







    gap: var(--spacing-md);







}















.spinner {







    width: 40px;







    height: 40px;







    border: 3px solid var(--border-color);







    border-top-color: var(--primary);







    border-radius: 50%;







    animation: spin 1s linear infinite;







}















@keyframes spin {







    to {







        transform: rotate(360deg);







    }







}















.loading-spinner p {







    color: var(--text-secondary);







    font-size: 14px;







}















.error-message {







    background: rgba(239, 68, 68, 0.1);







    border: 1px solid rgba(239, 68, 68, 0.3);







    border-radius: var(--radius-md);







    padding: var(--spacing-lg);







    color: #EF4444;







    text-align: center;







    margin: var(--spacing-xl) 0;







}















.empty-market-list {







    text-align: center;







    padding: var(--spacing-2xl);







    color: var(--text-secondary);







}















.empty-market-list svg {







    width: 64px;







    height: 64px;







    margin-bottom: var(--spacing-md);







    opacity: 0.5;







}















.empty-market-list h3 {







    font-size: 18px;







    margin-bottom: var(--spacing-sm);







    color: var(--text-primary);







}















.empty-market-list p {







    font-size: 14px;







    color: var(--text-muted);







}















/* 响应式设计 */







@media (max-width: 768px) {







    .market-monitor-header {







        flex-direction: column;







        align-items: flex-start;







    }















    .market-monitor-controls {







        width: 100%;







        flex-direction: column;







        align-items: stretch;







    }















    .filter-group {







        width: 100%;







        justify-content: space-between;







    }















    .filter-group select {







        flex: 1;







    }















    .market-card-info {







        grid-template-columns: 1fr;







    }















    .market-card-footer {







        flex-direction: column;







        align-items: flex-start;







        gap: var(--spacing-md);







    }















    .btn-trade {







        width: 100%;







        justify-content: center;







    }







}















/* ============================================







   钱包分析模块样式







   ============================================ */















.wallet-analyzer-container {
    --wa-left-width: 640px;
    --wa-right-width: 520px;







    padding: 0 var(--spacing-xl) var(--spacing-xl);







}

.wallet-analyzer-top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

@media (min-width: 1024px) {
    .wallet-analyzer-top-grid {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }
}

.wallet-analyzer-top-grid .wallet-search-box {
    margin-bottom: 0;
    padding: var(--spacing-md);
    width: 100%;
    max-width: var(--wa-left-width);
    margin-left: auto;
    margin-right: auto;
}

.wallet-address-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    min-height: 64px;
}

.wallet-analyzer-top-grid .wallet-address-box {
    width: 100%;
    max-width: var(--wa-right-width);
    margin-left: auto;
    margin-right: auto;
}

.wallet-analyzer-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

@media (min-width: 1024px) {
    .wallet-analyzer-layout {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.wallet-analyzer-left,
.wallet-analyzer-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.wallet-analyzer-left {
    align-items: center;
}

.wallet-analyzer-right {
    align-items: center;
}

.wallet-analyzer-left .stats-cards-row,
.wallet-analyzer-left .volume-stats-grid {
    width: 100%;
    max-width: var(--wa-left-width);
    margin-left: auto;
    margin-right: auto;
}

.wallet-analyzer-right .section-card {
    width: 100%;
    max-width: var(--wa-right-width);
}

.wallet-analyzer-container .section-card {
    padding: var(--spacing-md);
}

.wallet-analyzer-container .section-subtitle {
    margin-bottom: var(--spacing-sm);
}

.wallet-analyzer-container .stats-cards-row {
    margin-bottom: var(--spacing-md);
}

.wallet-analyzer-container .volume-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.wallet-analyzer-container .stat-card,
.wallet-analyzer-container .volume-card {
    padding: 14px 14px;
    text-align: left;
}

.wallet-analyzer-container .stat-card .stat-value {
    font-size: 22px;
}

.wallet-analyzer-container .stat-card .stat-sub {
    margin-top: 6px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .wallet-analyzer-container .stats-cards-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wallet-analyzer-container .volume-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.wallet-analyzer-container .volume-card {
    padding: var(--spacing-md);
}

.wa-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.wa-calendar-title {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
}

.wa-calendar-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.wa-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.wallet-analyzer-container .wa-calendar-grid {
    gap: 6px;
    max-width: 520px;
    margin: 0 auto;
}

.wallet-analyzer-container .wa-calendar-wrap {
    position: relative;
}

.wallet-analyzer-container .wa-calendar-tooltip {
    position: absolute;
    z-index: 10;
    min-width: 180px;
    max-width: 260px;
    background: rgba(15, 15, 18, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    transition: opacity 0.12s ease, transform 0.12s ease;
    pointer-events: none;
}

.wallet-analyzer-container .wa-calendar-tooltip.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wallet-analyzer-container .wa-calendar-tooltip.is-pinned {
    border-color: rgba(255, 138, 0, 0.55);
}

.wallet-analyzer-container .wa-calendar-tooltip-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.wallet-analyzer-container .wa-calendar-tooltip-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.wallet-analyzer-container .wa-calendar-tooltip-label {
    font-size: 12px;
    color: var(--text-muted);
}

.wallet-analyzer-container .wa-calendar-tooltip-value {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wa-calendar-dow {
    font-size: 11px;
    color: var(--text-muted);
    text-align: center;
    padding: 4px 0;
    user-select: none;
}

.wa-calendar-cell {
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    padding: 8px 8px;
    min-height: 54px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    overflow: hidden;
}

.wallet-analyzer-container .wa-calendar-cell {
    border-radius: 10px;
    padding: 6px 6px;
    min-height: 46px;
}

.wa-calendar-cell.is-outside {
    opacity: 0.35;
}

.wa-calendar-day {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1;
}

.wa-calendar-vol {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wallet-analyzer-container .wa-calendar-vol {
    font-size: 11px;
    letter-spacing: 0.1px;
    font-variant-numeric: tabular-nums;
}

.wa-tabs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.wallet-analyzer-container .wa-tabs-head {
    margin-bottom: var(--spacing-sm);
}

.wa-subtabs .view-btn {
    padding: 6px 10px;
    font-size: 13px;
}

.address-monitor-container {
    padding: var(--spacing-xl);
}

.address-monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.address-monitor-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.address-monitor-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
}

@media (min-width: 1024px) {
    .address-monitor-layout {
        grid-template-columns: 1fr 1fr;
    }
}

.address-monitor-bulk-input {
    min-height: 140px;
    resize: vertical;
    line-height: 1.4;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 12px;
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 12px;
    color: var(--text-primary);
    outline: none;
    transition: all 0.2s ease;
}

.address-monitor-bulk-input:focus {
    border-color: var(--primary);
    background: var(--bg-hover);
}

.address-monitor-input-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.address-monitor-left .section-card + .section-card {
    margin-top: var(--spacing-md);
}

.address-monitor-left .table-container {
    max-height: 360px;
    max-height: 45vh;
    overflow-y: auto;
}

.address-monitor-left .address-monitor-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-tertiary);
}

.address-monitor-input-hint {
    margin-top: var(--spacing-sm);
    color: var(--text-muted);
    font-size: 12px;
}

.address-monitor-events-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    max-height: 720px;
    overflow: auto;
    padding-right: 2px;
}

.address-monitor-events-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
}

.address-monitor-events-head .section-subtitle {
    margin-bottom: 0;
}

.address-monitor-subtitle-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.address-monitor-subtitle-hint {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
}

.address-monitor-right-hints {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    flex: 1 1 360px;
}

.address-monitor-hint-inline {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.3;
    text-align: right;
    display: block;
    max-width: 560px;
}

.address-monitor-event-item {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.address-monitor-event-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.address-monitor-event-time {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.address-monitor-event-line {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.address-monitor-event-who {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.address-monitor-who-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(243, 112, 33, 0.12);
    border: 1px solid rgba(243, 112, 33, 0.25);
    color: var(--text-primary);
}

.address-monitor-event-side {
    color: var(--text-secondary);
}

.address-monitor-value {
    color: var(--text-primary);
    font-weight: 600;
}

.address-monitor-market {
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
}

.address-monitor-event-pa {
    color: var(--text-muted);
    font-size: 12px;
}

.address-monitor-side-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 600;
}

.address-monitor-side-badge.buy {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.address-monitor-side-badge.sell {
    background: rgba(239, 68, 68, 0.15);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.address-monitor-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 12px;
}

.address-monitor-event-meta span {
    white-space: nowrap;
}

.address-monitor-event-links {
    margin-top: 8px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.address-monitor-event-links a {
    font-size: 12px;
}

.address-monitor-hint {
    margin-top: var(--spacing-md);
    color: var(--text-muted);
    font-size: 12px;
}















.wallet-analyzer-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    margin-bottom: var(--spacing-xl);







    flex-wrap: wrap;







    gap: var(--spacing-md);







}















.wallet-analyzer-header .section-title {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







    font-size: 20px;







    font-weight: 600;







    color: var(--text-primary);







}















.wallet-analyzer-header .section-title svg {







    color: var(--primary);







}















/* 钱包子标签 */







.wallet-tabs {







    display: flex;







    gap: var(--spacing-sm);







    margin-bottom: var(--spacing-xl);







    border-bottom: 1px solid var(--border-color);







    padding-bottom: var(--spacing-md);







    flex-wrap: wrap;







}















.wallet-tab-btn {







    display: flex;







    align-items: center;







    gap: var(--spacing-xs);







    padding: var(--spacing-sm) var(--spacing-lg);







    background: transparent;







    border: none;







    border-radius: var(--radius-md);







    color: var(--text-secondary);







    font-size: 14px;







    font-weight: 500;







    cursor: pointer;







    transition: all 0.2s ease;







}















.wallet-tab-btn:hover {







    background: var(--bg-hover);







    color: var(--text-primary);







}















.wallet-tab-btn.active {







    background: var(--primary);







    color: var(--text-primary);







}















.wallet-tab-btn svg {







    width: 16px;







    height: 16px;







}















/* 概览卡片网格 */







.wallet-overview-grid {







    display: grid;







    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));







    gap: var(--spacing-lg);







    margin-bottom: var(--spacing-xl);







}















.wallet-card {







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-lg);







    display: flex;







    align-items: flex-start;







    gap: var(--spacing-md);







    transition: all 0.2s ease;







}















.wallet-card:hover {







    border-color: var(--primary-light);







    transform: translateY(-2px);







    box-shadow: var(--shadow-md);







}















.wallet-card-icon {







    width: 48px;







    height: 48px;







    border-radius: var(--radius-md);







    background: rgba(243, 112, 33, 0.1);







    display: flex;







    align-items: center;







    justify-content: center;







    color: var(--primary);







    flex-shrink: 0;







}















.wallet-card-icon.accent {







    background: rgba(243, 112, 33, 0.2);







}















.wallet-card-icon.positive {







    background: rgba(16, 185, 129, 0.1);







    color: var(--success);







}















.wallet-card-icon.negative {







    background: rgba(239, 68, 68, 0.1);







    color: var(--danger);







}















.wallet-card-content {







    flex: 1;







    min-width: 0;







}















.wallet-card-label {







    font-size: 12px;







    color: var(--text-muted);







    text-transform: uppercase;







    letter-spacing: 0.5px;







    margin-bottom: var(--spacing-xs);







}















.wallet-card-value {







    font-size: 18px;







    font-weight: 600;







    color: var(--text-primary);







    word-break: break-all;







}















.wallet-card-value.large {







    font-size: 24px;







    color: var(--primary);







}















.wallet-card-value.positive {







    color: var(--success);







}















.wallet-card-value.negative {







    color: var(--danger);







}















.wallet-card-sub {







    font-size: 12px;







    color: var(--text-secondary);







    margin-top: var(--spacing-xs);







}















/* 钱包地址样式 */







.wallet-address-card {







    grid-column: span 2;







}















.wallet-address-container {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







}















.wallet-address-text {







    font-family: 'Roboto Mono', monospace;







    font-size: 14px;







}















.wallet-total-card {







    border-color: var(--primary);







    background: linear-gradient(135deg, rgba(243, 112, 33, 0.1) 0%, rgba(243, 112, 33, 0.05) 100%);







}















/* 余额明细 */







.wallet-section {







    margin-top: var(--spacing-xl);







}















.wallet-section-title {







    font-size: 16px;







    font-weight: 600;







    color: var(--text-primary);







    margin-bottom: var(--spacing-lg);







    padding-bottom: var(--spacing-sm);







    border-bottom: 1px solid var(--border-color);







}















.wallet-balance-list {







    display: grid;







    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));







    gap: var(--spacing-md);







}















.wallet-balance-item {







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-md);







    padding: var(--spacing-md);







    display: flex;







    justify-content: space-between;







    align-items: center;







}















.balance-token {







    font-size: 16px;







    font-weight: 600;







    color: var(--primary);







}















.balance-details {







    text-align: right;







}















.balance-row {







    display: flex;







    justify-content: space-between;







    gap: var(--spacing-lg);







    font-size: 13px;







    margin-bottom: 2px;







}















.balance-label {







    color: var(--text-muted);







}















.balance-value {







    color: var(--text-primary);







    font-weight: 500;







}















.balance-value.accent {







    color: var(--primary);







}















/* 表格样式 */







.wallet-table-container {







    overflow-x: auto;







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







}















.wallet-table {







    width: 100%;







    border-collapse: collapse;







}















.wallet-table th,







.wallet-table td {







    padding: var(--spacing-md) var(--spacing-lg);







    text-align: left;







    border-bottom: 1px solid var(--border-color);







}















.wallet-table th {







    background: var(--bg-tertiary);







    font-size: 12px;







    font-weight: 600;







    color: var(--text-muted);







    text-transform: uppercase;







    letter-spacing: 0.5px;







}















.wallet-table tbody tr:hover {







    background: var(--bg-hover);







}















.wallet-table tbody tr:last-child td {







    border-bottom: none;







}















.market-info-cell {







    display: flex;







    flex-direction: column;







    gap: 2px;







}















.market-info-cell .market-id {







    font-size: 11px;







    color: var(--text-muted);







}















.market-info-cell .market-title {







    font-size: 13px;







    color: var(--text-primary);







    max-width: 300px;







    overflow: hidden;







    text-overflow: ellipsis;







    white-space: nowrap;







}















.outcome-badge {







    display: inline-flex;







    padding: 2px 8px;







    border-radius: var(--radius-sm);







    background: rgba(59, 130, 246, 0.15);







    color: var(--info);







    font-size: 12px;







    font-weight: 500;







}















.side-badge {







    display: inline-flex;







    padding: 2px 8px;







    border-radius: var(--radius-sm);







    font-size: 12px;







    font-weight: 500;







}















.side-badge.buy {







    background: rgba(16, 185, 129, 0.15);







    color: var(--success);







}















.side-badge.sell {







    background: rgba(239, 68, 68, 0.15);







    color: var(--danger);







}















.status-badge {







    display: inline-flex;







    padding: 2px 8px;







    border-radius: var(--radius-sm);







    font-size: 12px;







    font-weight: 500;







}















.status-badge.open {







    background: rgba(59, 130, 246, 0.15);







    color: var(--info);







}















.status-badge.filled {







    background: rgba(16, 185, 129, 0.15);







    color: var(--success);







}















.status-badge.cancelled {







    background: rgba(156, 163, 175, 0.15);







    color: var(--text-muted);







}















.pnl-cell {







    display: flex;







    flex-direction: column;







    align-items: flex-end;







}















.pnl-cell .pnl-value {







    font-weight: 600;







}















.pnl-cell .pnl-percent {







    font-size: 11px;







}















.pnl-cell.positive {







    color: var(--success);







}















.pnl-cell.negative {







    color: var(--danger);







}















.time-cell {







    font-size: 12px;







    color: var(--text-secondary);







    white-space: nowrap;







}















.wallet-table-footer {







    display: flex;







    justify-content: space-between;







    align-items: center;







    padding: var(--spacing-md) var(--spacing-lg);







    background: var(--bg-tertiary);







    border-top: 1px solid var(--border-color);







    font-size: 13px;







    color: var(--text-secondary);







}















/* 订单筛选器 */







.wallet-orders-filter {







    display: flex;







    gap: var(--spacing-sm);







    margin-bottom: var(--spacing-lg);







    flex-wrap: wrap;







}















.filter-btn {







    padding: var(--spacing-sm) var(--spacing-md);







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-md);







    color: var(--text-secondary);







    font-size: 13px;







    cursor: pointer;







    transition: all 0.2s ease;







}















.filter-btn:hover {







    border-color: var(--primary-light);







    color: var(--text-primary);







}















.filter-btn.active {







    background: var(--primary);







    border-color: var(--primary);







    color: var(--text-primary);







}















/* 统计卡片 */







.wallet-stats-grid {







    display: grid;







    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));







    gap: var(--spacing-lg);







    margin-bottom: var(--spacing-xl);







}















.wallet-stat-card {







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-xl);







    text-align: center;







    transition: all 0.2s ease;







}















.wallet-stat-card:hover {







    transform: translateY(-2px);







    box-shadow: var(--shadow-md);







}















.wallet-stat-card.accent {







    border-color: var(--primary);







    background: linear-gradient(135deg, rgba(243, 112, 33, 0.1) 0%, rgba(243, 112, 33, 0.05) 100%);







}















.wallet-stat-card.buy {







    border-left: 3px solid var(--success);







}















.wallet-stat-card.sell {







    border-left: 3px solid var(--danger);







}















.wallet-stat-card .stat-icon {







    width: 48px;







    height: 48px;







    margin: 0 auto var(--spacing-md);







    border-radius: 50%;







    background: rgba(243, 112, 33, 0.1);







    display: flex;







    align-items: center;







    justify-content: center;







    color: var(--primary);







}















.wallet-stat-card.buy .stat-icon {







    background: rgba(16, 185, 129, 0.1);







    color: var(--success);







}















.wallet-stat-card.sell .stat-icon {







    background: rgba(239, 68, 68, 0.1);







    color: var(--danger);







}















.wallet-stat-card .stat-value {







    font-size: 24px;







    font-weight: 700;







    color: var(--text-primary);







    margin-bottom: var(--spacing-xs);







}















.wallet-stat-card .stat-sub {







    font-size: 12px;







    color: var(--text-secondary);







    margin-bottom: var(--spacing-sm);







}















.wallet-stat-card .stat-label {







    font-size: 12px;







    color: var(--text-muted);







    text-transform: uppercase;







    letter-spacing: 0.5px;







}















/* 交易量最高的市场 */







.wallet-top-markets {







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    overflow: hidden;







}















.top-market-item {







    display: flex;







    align-items: center;







    gap: var(--spacing-md);







    padding: var(--spacing-md) var(--spacing-lg);







    border-bottom: 1px solid var(--border-color);







    transition: background 0.2s ease;







}















.top-market-item:last-child {







    border-bottom: none;







}















.top-market-item:hover {







    background: var(--bg-hover);







}















.top-market-rank {







    width: 28px;







    height: 28px;







    border-radius: 50%;







    background: var(--primary);







    color: var(--text-primary);







    display: flex;







    align-items: center;







    justify-content: center;







    font-size: 12px;







    font-weight: 700;







    flex-shrink: 0;







}















.top-market-item:nth-child(1) .top-market-rank {







    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);







}















.top-market-item:nth-child(2) .top-market-rank {







    background: linear-gradient(135deg, #C0C0C0 0%, #A0A0A0 100%);







}















.top-market-item:nth-child(3) .top-market-rank {







    background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%);







}















.top-market-info {







    flex: 1;







    min-width: 0;







}















.top-market-title {







    font-size: 14px;







    font-weight: 500;







    color: var(--text-primary);







    overflow: hidden;







    text-overflow: ellipsis;







    white-space: nowrap;







}















.top-market-meta {







    display: flex;







    gap: var(--spacing-md);







    font-size: 12px;







    color: var(--text-muted);







    margin-top: 2px;







}















.top-market-volume {







    font-size: 14px;







    font-weight: 600;







    color: var(--primary);







    white-space: nowrap;







}















/* 空状态和加载状态 */







.empty-state,







.loading-state,







.error-state {







    display: flex;







    flex-direction: column;







    align-items: center;







    justify-content: center;







    padding: var(--spacing-2xl);







    text-align: center;







    color: var(--text-secondary);







}















.empty-state svg,







.loading-state svg,







.error-state svg {







    color: var(--text-muted);







    margin-bottom: var(--spacing-md);







    opacity: 0.5;







}















.error-state {







    color: var(--danger);







}















.error-state svg {







    color: var(--danger);







    opacity: 0.8;







}















.loading-spinner {







    width: 32px;







    height: 32px;







    border: 3px solid var(--border-color);







    border-top-color: var(--primary);







    border-radius: 50%;







    animation: spin 1s linear infinite;







    margin-bottom: var(--spacing-md);







}















@keyframes spin {







    to {







        transform: rotate(360deg);







    }







}















/* 响应式设计 - 钱包分析 */







@media (max-width: 768px) {







    .wallet-analyzer-header {







        flex-direction: column;







        align-items: flex-start;







    }







    







    .wallet-tabs {







        overflow-x: auto;







        -webkit-overflow-scrolling: touch;







        padding-bottom: var(--spacing-sm);







    }







    







    .wallet-tab-btn {







        white-space: nowrap;







    }







    







    .wallet-address-card {







        grid-column: span 1;







    }







    







    .wallet-overview-grid {







        grid-template-columns: 1fr;







    }







    







    .wallet-stats-grid {







        grid-template-columns: repeat(2, 1fr);







    }







    







    .wallet-table th,







    .wallet-table td {







        padding: var(--spacing-sm) var(--spacing-md);







        font-size: 12px;







    }







    







    .market-info-cell .market-title {







        max-width: 150px;







    }







}















/* ============================================







   钱包搜索模块新增样式







   ============================================ */















/* 搜索框 */







.wallet-search-box {







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-xl);







    margin-bottom: var(--spacing-xl);







}















.search-input-wrapper {







    display: flex;







    align-items: center;







    gap: var(--spacing-md);







    background: var(--bg-primary);







    border: 2px solid var(--border-color);







    border-radius: var(--radius-md);







    padding: var(--spacing-sm) var(--spacing-md);







    transition: border-color 0.2s ease;







}















.search-input-wrapper:focus-within {







    border-color: var(--primary);







}















.search-input-wrapper svg {







    color: var(--text-muted);







    flex-shrink: 0;







}















.search-input-wrapper input {







    flex: 1;







    background: transparent;







    border: none;







    color: var(--text-primary);







    font-size: 15px;







    padding: var(--spacing-sm) 0;







    font-family: 'Roboto Mono', monospace;







}















.search-input-wrapper input::placeholder {







    color: var(--text-muted);







}















.search-input-wrapper input:focus {







    outline: none;







}















.search-input-wrapper .btn-primary {







    flex-shrink: 0;







    display: flex;







    align-items: center;







    gap: var(--spacing-xs);







}















.search-hint {







    color: var(--text-muted);







    font-size: 13px;







    margin-top: var(--spacing-md);







    text-align: center;







}















.search-prompt {







    padding: var(--spacing-2xl) var(--spacing-xl);







}















.search-prompt h3 {







    font-size: 18px;







    color: var(--text-primary);







    margin-top: var(--spacing-md);







}















.search-prompt p {







    color: var(--text-muted);







    font-size: 14px;







    margin-top: var(--spacing-sm);







}















.feature-list {







    display: flex;







    gap: var(--spacing-md);







    margin-top: var(--spacing-lg);







    flex-wrap: wrap;







    justify-content: center;







}















.feature-item {







    padding: var(--spacing-sm) var(--spacing-md);







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-md);







    font-size: 13px;







    color: var(--text-secondary);







}















.api-badge {







    padding: var(--spacing-xs) var(--spacing-md);







    background: rgba(59, 130, 246, 0.15);







    border: 1px solid rgba(59, 130, 246, 0.3);







    border-radius: var(--radius-sm);







    font-size: 11px;







    font-weight: 600;







    color: var(--info);







    text-transform: uppercase;







    letter-spacing: 0.5px;







}















.wallet-tx-count {







    display: flex;







    flex-direction: column;







    align-items: flex-end;







    gap: 2px;







}















.tx-count-label {







    font-size: 11px;







    color: var(--text-muted);







    text-transform: uppercase;







}















.tx-count-value {







    font-size: 20px;







    font-weight: 700;







    color: var(--primary);







}















.balance-card.total {







    border-left: 3px solid var(--primary);







    background: linear-gradient(135deg, rgba(243, 112, 33, 0.05) 0%, transparent 100%);







}















.balance-card.total .balance-icon {







    background: rgba(243, 112, 33, 0.15);







    color: var(--primary);







}















.balance-amount.accent {







    color: var(--primary);







}















.tx-block {







    font-size: 11px;







    color: var(--text-muted);







    font-family: 'Roboto Mono', monospace;







}















/* 账户总净值卡片 */







.net-value-card {







    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);







    border-radius: var(--radius-lg);







    padding: var(--spacing-xl);







    margin-bottom: var(--spacing-lg);







    color: white;







}















.net-value-main {







    display: flex;







    flex-direction: column;







    align-items: center;







    margin-bottom: var(--spacing-lg);







}















.net-value-label {







    font-size: 14px;







    opacity: 0.9;







    margin-bottom: var(--spacing-xs);







}















.net-value-amount {







    font-size: 42px;







    font-weight: 700;







    letter-spacing: -1px;







}















.net-value-breakdown {







    display: flex;







    justify-content: center;







    gap: var(--spacing-xl);







    padding-top: var(--spacing-md);







    border-top: 1px solid rgba(255, 255, 255, 0.2);







}















.breakdown-item {







    display: flex;







    flex-direction: column;







    align-items: center;







    gap: 4px;







}















.breakdown-label {







    font-size: 12px;







    opacity: 0.8;







}















.breakdown-value {







    font-size: 18px;







    font-weight: 600;







}















/* 交易量统计 */







.volume-stats-section {







    margin-bottom: var(--spacing-xl);







}















.volume-stats-grid {







    display: grid;







    grid-template-columns: repeat(4, 1fr);







    gap: var(--spacing-md);







}















@media (max-width: 768px) {







    .volume-stats-grid {







        grid-template-columns: repeat(2, 1fr);







    }







}















.volume-card {







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-lg);







    text-align: center;







    transition: all 0.2s ease;







}















.volume-card:hover {







    transform: translateY(-2px);







    box-shadow: var(--shadow-md);







}















.volume-card.total {







    border-top: 3px solid var(--primary);







}















.volume-card.this-week {







    border-top: 3px solid var(--success);







}















.volume-card.last-week {







    border-top: 3px solid var(--warning);







}















.volume-card.trades {







    border-top: 3px solid var(--info);







}















.volume-card .volume-value {







    font-size: 24px;







    font-weight: 700;







    color: var(--text-primary);







    margin-bottom: 4px;







}















.volume-card .volume-sub {







    font-size: 12px;







    color: var(--text-secondary);







    margin-bottom: 4px;







}















.volume-card .volume-label {







    font-size: 12px;







    color: var(--text-muted);







    text-transform: uppercase;







    letter-spacing: 0.5px;







}















/* 持仓区域 */







.positions-section {







    margin-bottom: var(--spacing-xl);







}















.positions-grid {







    display: grid;







    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));







    gap: var(--spacing-md);







}















.position-card {







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-md);







    transition: all 0.2s ease;







}















.position-card:hover {







    border-color: var(--primary);







    box-shadow: var(--shadow-md);







}















.position-header {







    display: flex;







    justify-content: space-between;







    align-items: flex-start;







    margin-bottom: var(--spacing-sm);







    padding-bottom: var(--spacing-sm);







    border-bottom: 1px solid var(--border-color);







}















.position-market {







    font-weight: 600;







    color: var(--text-primary);







    font-size: 14px;







}















.position-outcome {







    background: var(--primary);







    color: white;







    padding: 2px 8px;







    border-radius: var(--radius-sm);







    font-size: 11px;







    font-weight: 600;







}















.position-details {







    display: flex;







    justify-content: space-between;







}















.position-stat {







    display: flex;







    flex-direction: column;







    gap: 2px;







}















.position-stat .stat-label {







    font-size: 11px;







    color: var(--text-muted);







    text-transform: uppercase;







}















.position-stat .stat-value {







    font-size: 16px;







    font-weight: 600;







    color: var(--text-primary);







}















/* 订单区域 */







.orders-section {







    margin-bottom: var(--spacing-xl);







}















.orders-table-wrapper {







    overflow-x: auto;







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







}















.orders-table {







    width: 100%;







    border-collapse: collapse;







    font-size: 13px;







    table-layout: auto;







}















.orders-table th:nth-child(1),







.orders-table td:nth-child(1) {







    width: 80px;







    min-width: 80px;







}















.orders-table th:nth-child(2),







.orders-table td:nth-child(2) {







    min-width: 200px;







    max-width: 400px;







    word-wrap: break-word;







    word-break: break-word;







    white-space: normal;







    padding-right: var(--spacing-md);







}















/* 选项列 */







.orders-table th:nth-child(3),







.orders-table td:nth-child(3) {







    min-width: 100px;







    max-width: 150px;







    white-space: normal;







    padding-left: var(--spacing-sm);







    padding-right: var(--spacing-sm);







}















/* 方向列 */







.orders-table th:nth-child(4),







.orders-table td:nth-child(4) {







    width: 70px;







    min-width: 70px;







    max-width: 70px;







    white-space: nowrap;







    text-align: center;







    padding-left: var(--spacing-sm);







    padding-right: var(--spacing-sm);







}















.order-outcome {







    font-weight: 600;







    color: var(--text-secondary);







}















/* Shares列 */







.orders-table th:nth-child(5),







.orders-table td:nth-child(5) {







    white-space: nowrap;







    text-align: right;







    padding-left: var(--spacing-md);







    padding-right: var(--spacing-md);







    min-width: 90px;







}















/* 价格列 */







.orders-table th:nth-child(6),







.orders-table td:nth-child(6) {







    white-space: nowrap;







    text-align: right;







    padding-left: var(--spacing-md);







    padding-right: var(--spacing-md);







    min-width: 100px;







}















/* 金额列 */







.orders-table th:nth-child(7),







.orders-table td:nth-child(7) {







    white-space: nowrap;







    text-align: right;







    padding-left: var(--spacing-md);







    padding-right: var(--spacing-md);







    min-width: 100px;







}















/* 时间列 */







.orders-table th:nth-child(8),







.orders-table td:nth-child(8) {







    white-space: nowrap;







    padding-left: var(--spacing-md);







    padding-right: var(--spacing-md);







    min-width: 160px;







    text-align: left;







}















/* 交易列 */







.orders-table th:nth-child(9),







.orders-table td:nth-child(9) {







    white-space: nowrap;







    padding-left: var(--spacing-md);







    padding-right: var(--spacing-sm);







    min-width: 120px;







}















.orders-table th {







    background: var(--bg-tertiary);







    padding: var(--spacing-sm) var(--spacing-md);







    text-align: left;







    font-weight: 600;







    color: var(--text-secondary);







    text-transform: uppercase;







    font-size: 11px;







    letter-spacing: 0.5px;







    border-bottom: 1px solid var(--border-color);







}















.orders-table td {







    padding: var(--spacing-sm) var(--spacing-md);







    border-bottom: 1px solid var(--border-color);







    color: var(--text-primary);







}















.orders-table tr:last-child td {







    border-bottom: none;







}















.orders-table tr:hover {







    background: var(--bg-hover);







}















.order-direction {







    display: inline-block;







    padding: 2px 8px;







    border-radius: var(--radius-sm);







    font-weight: 600;







    font-size: 11px;







}















.order-direction.buy {







    background: rgba(16, 185, 129, 0.15);







    color: var(--success);







}















.order-direction.sell {







    background: rgba(239, 68, 68, 0.15);







    color: var(--danger);







}















.order-market {







    min-width: 300px;







    max-width: 600px;







    word-wrap: break-word;







    word-break: break-word;







    white-space: normal;







}















.market-title {







    display: inline-block;







    max-width: 100%;







}















.market-outcome {







    display: inline-block;







    margin-left: 4px;







    color: var(--text-secondary);







    font-size: 12px;







    font-weight: 500;







}















.market-id {







    font-family: 'Roboto Mono', monospace;







    font-size: 12px;







}















.order-shares {







    font-weight: 600;







}















.order-price {







    color: var(--text-secondary);







}















.order-value {







    font-weight: 600;







}















.order-time {







    display: flex;







    flex-direction: column;







    gap: 2px;







}















.time-relative {







    font-size: 12px;







    color: var(--text-primary);







}















.time-exact {







    font-size: 10px;







    color: var(--text-muted);







}















.tx-link {
    cursor: pointer;
}

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

.order-tx .tx-link {







    color: var(--info);







    text-decoration: none;







    font-family: 'Roboto Mono', monospace;







    font-size: 11px;







}















.order-tx .tx-link:hover {







    text-decoration: underline;







}















/* 小标题样式 */







.section-subtitle {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







    font-size: 16px;







    font-weight: 600;







    color: var(--text-primary);







    margin-bottom: var(--spacing-md);







}















.section-subtitle svg {







    color: var(--text-muted);







}















.count-badge {







    background: var(--bg-tertiary);







    color: var(--text-secondary);







    padding: 2px 8px;







    border-radius: var(--radius-full);







    font-size: 12px;







    font-weight: 500;







}















/* 小型空状态 */







.empty-state.small {







    padding: var(--spacing-lg);







    text-align: center;







    color: var(--text-muted);







}















.empty-state.small svg {







    margin-bottom: var(--spacing-sm);







    opacity: 0.5;







}















.empty-state.small p {







    margin: 0;







    font-size: 14px;







}















/* 数据来源标签 */







.data-source-badge {







    display: inline-block;







    background: linear-gradient(135deg, #f59e0b, #d97706);







    color: white;







    padding: 2px 8px;







    border-radius: var(--radius-sm);







    font-size: 10px;







    font-weight: 600;







    margin-left: 8px;







    text-transform: uppercase;







}















/* 进度条 */







.progress-bar {







    width: 200px;







    height: 6px;







    background: var(--bg-tertiary);







    border-radius: var(--radius-full);







    margin-top: var(--spacing-md);







    overflow: hidden;







}















.progress-fill {







    height: 100%;







    background: linear-gradient(90deg, var(--primary), #6366f1);







    border-radius: var(--radius-full);







    transition: width 0.3s ease;







}















/* 盈亏样式 */







.profit {







    color: #10b981 !important;







}















.loss {







    color: #ef4444 !important;







}















.stat-card.profit {







    border-left: 3px solid #10b981;







}















.stat-card.loss {







    border-left: 3px solid #ef4444;







}















.stats-cards-row {







    display: grid;







    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));







    gap: var(--spacing-md);







    margin-bottom: var(--spacing-lg);







}















.stat-card {







    background: var(--bg-secondary);







    border-radius: var(--radius-md);







    padding: var(--spacing-md);







}















.stat-card .stat-label {







    font-size: 12px;







    color: var(--text-secondary);







    margin-bottom: 4px;







}















.stat-card .stat-value {







    font-size: 24px;







    font-weight: 600;







}















.stat-card .stat-sub {







    font-size: 11px;







    color: var(--text-secondary);







    margin-top: 4px;







}















.position-stat.profit .stat-value,







.position-stat.loss .stat-value {







    font-weight: 600;







}















.market-title {







    font-weight: 500;







    max-width: 200px;







    overflow: hidden;







    text-overflow: ellipsis;







    white-space: nowrap;







}















/* 交易记录列表 */







.trades-section {







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-lg);







}















.trade-filter-group {







    display: flex;







    gap: var(--spacing-xs);







}















.trade-filter-btn {







    padding: var(--spacing-xs) var(--spacing-md);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-sm);







    background: transparent;







    color: var(--text-secondary);







    font-size: 12px;







    cursor: pointer;







    transition: all 0.2s ease;







}















.trade-filter-btn:hover {







    border-color: var(--primary);







    color: var(--text-primary);







}















.trade-filter-btn.active {







    background: var(--primary);







    border-color: var(--primary);







    color: white;







}















.trades-list {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-sm);







    margin-top: var(--spacing-md);







}















.trade-item {







    display: flex;







    align-items: center;







    gap: var(--spacing-md);







    padding: var(--spacing-md);







    background: var(--bg-primary);







    border-radius: var(--radius-md);







    border-left: 3px solid transparent;







    transition: all 0.2s ease;







}















.trade-item:hover {







    background: var(--bg-hover);







}















.trade-item.buy {







    border-left-color: var(--success);







}















.trade-item.sell {







    border-left-color: var(--danger);







}















.trade-icon {







    width: 36px;







    height: 36px;







    border-radius: 50%;







    display: flex;







    align-items: center;







    justify-content: center;







    flex-shrink: 0;







}















.trade-icon.buy {







    background: rgba(16, 185, 129, 0.15);







    color: var(--success);







}















.trade-icon.sell {







    background: rgba(239, 68, 68, 0.15);







    color: var(--danger);







}















.trade-info {







    flex: 1;







    min-width: 0;







}















.trade-main {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







}















.trade-direction {







    font-size: 13px;







    font-weight: 600;







}















.trade-direction.buy {







    color: var(--success);







}















.trade-direction.sell {







    color: var(--danger);







}















.trade-amount {







    font-size: 14px;







    font-weight: 600;







    color: var(--text-primary);







}















.trade-meta {







    display: flex;







    align-items: center;







    gap: var(--spacing-md);







    margin-top: 4px;







    font-size: 12px;







    color: var(--text-muted);







}















.trade-token {







    font-family: 'Roboto Mono', monospace;







}















.trade-block {







    font-family: 'Roboto Mono', monospace;







}















.trade-hash {







    color: var(--info);







    text-decoration: none;







    font-family: 'Roboto Mono', monospace;







}















.trade-hash:hover {







    text-decoration: underline;







}















/* 搜索结果 */







.wallet-result-header {







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-lg);







    margin-bottom: var(--spacing-lg);







}















.wallet-address-display {







    display: flex;
    width: 100%;







    flex-direction: column;







    gap: var(--spacing-sm);







}

@media (min-width: 768px) {
    .wallet-address-display {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-md);
    }
}

.wa-user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: var(--spacing-md);
}

.wa-user-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.wa-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--bg-tertiary);
}

.wa-user-avatar-placeholder {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(34, 197, 94, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.wa-user-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.wa-user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.wa-user-address {
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.wa-user-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 0 0 auto;
}

.hidden {
    display: none !important;
}















.address-label {







    font-size: 12px;







    color: var(--text-muted);







    text-transform: uppercase;







    letter-spacing: 0.5px;







}















.address-value {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







}















.address-text {







    font-family: 'Roboto Mono', monospace;







    font-size: 14px;







    color: var(--text-primary);







    word-break: break-all;







}















.btn-icon-sm {







    width: 28px;







    height: 28px;







    border-radius: var(--radius-sm);







    background: var(--bg-hover);







    border: none;







    color: var(--text-secondary);







    display: flex;







    align-items: center;







    justify-content: center;







    cursor: pointer;







    transition: all 0.2s ease;
}

.btn-icon-sm.is-on {
    color: var(--primary);
    background: rgba(255, 138, 0, 0.12);
}






    text-decoration: none;







}















.btn-icon-sm:hover {







    background: var(--primary);







    color: var(--text-primary);







}















/* 余额卡片网格 */







.wallet-balance-grid {







    display: grid;







    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));







    gap: var(--spacing-lg);







    margin-bottom: var(--spacing-xl);







}















.balance-card {







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-lg);







    display: flex;







    align-items: center;







    gap: var(--spacing-md);







    transition: all 0.2s ease;







}















.balance-card:hover {







    transform: translateY(-2px);







    box-shadow: var(--shadow-md);







}















.balance-card.bnb {







    border-left: 3px solid #F3BA2F;







}















.balance-card.usdt {







    border-left: 3px solid #26A17B;







}















.balance-icon {







    width: 48px;







    height: 48px;







    border-radius: var(--radius-md);







    display: flex;







    align-items: center;







    justify-content: center;







}















.balance-card.bnb .balance-icon {







    background: rgba(243, 186, 47, 0.15);







    color: #F3BA2F;







}















.balance-card.usdt .balance-icon {







    background: rgba(38, 161, 123, 0.15);







    color: #26A17B;







}















.balance-info {







    display: flex;







    flex-direction: column;







    gap: 4px;







}















.balance-info .balance-label {







    font-size: 12px;







    color: var(--text-muted);







    text-transform: uppercase;







}















.balance-info .balance-amount {







    font-size: 18px;







    font-weight: 600;







    color: var(--text-primary);







}















/* 交易量统计部分 */







.volume-stats-section {







    margin-bottom: var(--spacing-xl);







}















.section-subtitle {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







    font-size: 16px;







    font-weight: 600;







    color: var(--text-primary);







    margin-bottom: var(--spacing-lg);







}















.section-subtitle svg {







    color: var(--primary);







}















.volume-stats-grid {







    display: grid;







    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));







    gap: var(--spacing-lg);







}















.volume-stat-card {







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-lg);







    transition: all 0.2s ease;







}















.volume-stat-card:hover {







    transform: translateY(-2px);







    box-shadow: var(--shadow-md);







}















.volume-stat-card.total {







    border-top: 3px solid var(--primary);







}















.volume-stat-card.this-week {







    border-top: 3px solid var(--success);







}















.volume-stat-card.last-week {







    border-top: 3px solid var(--warning);







}















.stat-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    margin-bottom: var(--spacing-md);







}















.stat-title {







    font-size: 14px;







    font-weight: 600;







    color: var(--text-primary);







}















.stat-badge {







    font-size: 11px;







    padding: 2px 8px;







    border-radius: var(--radius-sm);







    background: rgba(243, 112, 33, 0.15);







    color: var(--primary);







}















.stat-badge.success {







    background: rgba(16, 185, 129, 0.15);







    color: var(--success);







}















.stat-badge.warning {







    background: rgba(245, 158, 11, 0.15);







    color: var(--warning);







}















.stat-values {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-sm);







    margin-bottom: var(--spacing-md);







}















.stat-row {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







}















.token-icon {







    font-size: 11px;







    font-weight: 600;







    padding: 2px 6px;







    border-radius: var(--radius-sm);







}















.token-icon.bnb {







    background: rgba(243, 186, 47, 0.15);







    color: #F3BA2F;







}















.token-icon.usdt {







    background: rgba(38, 161, 123, 0.15);







    color: #26A17B;







}















.stat-amount {







    font-size: 15px;







    font-weight: 600;







    color: var(--text-primary);







}















.stat-footer {







    padding-top: var(--spacing-sm);







    border-top: 1px solid var(--border-color);







}















.tx-count {







    font-size: 12px;







    color: var(--text-muted);







}















/* 交易记录部分 */







.transactions-section {







    background: var(--bg-secondary);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-lg);







    padding: var(--spacing-lg);







}















.section-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    margin-bottom: var(--spacing-lg);







    flex-wrap: wrap;







    gap: var(--spacing-md);







}















.tx-filter-group {







    display: flex;







    gap: var(--spacing-xs);







}















.tx-filter-btn {







    padding: var(--spacing-xs) var(--spacing-md);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-sm);







    background: transparent;







    color: var(--text-secondary);







    font-size: 12px;







    cursor: pointer;







    transition: all 0.2s ease;







}















.tx-filter-btn:hover {







    border-color: var(--primary);







    color: var(--text-primary);







}















.tx-filter-btn.active {







    background: var(--primary);







    border-color: var(--primary);







    color: var(--text-primary);







}















.tx-list {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-sm);







}















.tx-item {







    display: flex;







    align-items: center;







    gap: var(--spacing-md);







    padding: var(--spacing-md);







    background: var(--bg-primary);







    border-radius: var(--radius-md);







    transition: background 0.2s ease;







}















.tx-item:hover {







    background: var(--bg-hover);







}















.tx-icon {







    width: 36px;







    height: 36px;







    border-radius: 50%;







    display: flex;







    align-items: center;







    justify-content: center;







    flex-shrink: 0;







}















.tx-icon.in {







    background: rgba(16, 185, 129, 0.15);







    color: var(--success);







}















.tx-icon.out {







    background: rgba(239, 68, 68, 0.15);







    color: var(--danger);







}















.tx-info {







    flex: 1;







    min-width: 0;







}















.tx-main {







    display: flex;







    align-items: center;







    gap: var(--spacing-sm);







    flex-wrap: wrap;







}















.tx-type-badge {







    font-size: 10px;







    font-weight: 600;







    padding: 2px 6px;







    border-radius: var(--radius-sm);







}















.tx-type-badge.bnb {







    background: rgba(243, 186, 47, 0.15);







    color: #F3BA2F;







}















.tx-type-badge.token {







    background: rgba(38, 161, 123, 0.15);







    color: #26A17B;







}















.tx-direction {







    font-size: 12px;







    font-weight: 500;







}















.tx-direction.in {







    color: var(--success);







}















.tx-direction.out {







    color: var(--danger);







}















.tx-amount {







    font-size: 14px;







    font-weight: 600;







    color: var(--text-primary);







}















.tx-meta {







    display: flex;







    align-items: center;







    gap: var(--spacing-md);







    margin-top: 4px;







}















.tx-time {







    font-size: 12px;







    color: var(--text-muted);







}















.tx-hash {







    font-size: 12px;







    color: var(--info);







    text-decoration: none;







    font-family: 'Roboto Mono', monospace;







}















.tx-hash:hover {







    text-decoration: underline;







}















.tx-status {







    font-size: 12px;







    font-weight: 500;







    padding: 4px 8px;







    border-radius: var(--radius-sm);







    flex-shrink: 0;







}















.tx-status.success {







    background: rgba(16, 185, 129, 0.15);







    color: var(--success);







}















.tx-status.failed {







    background: rgba(239, 68, 68, 0.15);







    color: var(--danger);







}















/* 响应式 - 钱包搜索 */







@media (max-width: 768px) {







    .search-input-wrapper {







        flex-direction: column;







        gap: var(--spacing-sm);







    }







    







    .search-input-wrapper input {







        width: 100%;







    }







    







    .search-input-wrapper .btn-primary {







        width: 100%;







        justify-content: center;







    }







    







    .wallet-balance-grid {







        grid-template-columns: 1fr;







    }







    







    .volume-stats-grid {







        grid-template-columns: 1fr;







    }







    







    .section-header {







        flex-direction: column;







        align-items: flex-start;







    }







    







    .tx-filter-group {







        width: 100%;







        justify-content: flex-start;







    }







    







    .tx-item {







        flex-wrap: wrap;







    }







    







    .tx-status {







        width: 100%;







        text-align: center;







        margin-top: var(--spacing-sm);







    }







}















/* ============================================







   结算日历样式







   ============================================ */







.settlement-calendar-container {







    padding: var(--spacing-xl);







}















.calendar-header {







    display: flex;







    justify-content: space-between;







    align-items: center;







    margin-bottom: var(--spacing-xl);







    flex-wrap: wrap;







    gap: var(--spacing-md);







}















.calendar-controls {







    display: flex;







    gap: var(--spacing-md);







    align-items: center;







}

.calendar-controls .form-select {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.calendar-controls .form-select:hover {
    border-color: var(--primary);
    background: var(--bg-hover);
}

.calendar-controls .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(243, 112, 33, 0.1);
}

.calendar-controls .form-select option {
    color: #111;
    background: #fff;
}















.calendar-stats {







    display: grid;







    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));







    gap: var(--spacing-md);







    margin-bottom: var(--spacing-xl);







}















.settlement-list {







    display: flex;







    flex-direction: column;







    gap: var(--spacing-md);







}















.settlement-item {







    background: var(--bg-card);







    border: 1px solid var(--border-color);







    border-radius: var(--radius-md);







    padding: var(--spacing-lg);







    display: flex;







    justify-content: space-between;







    align-items: center;







    transition: all 0.2s ease;







    position: relative;







}















.settlement-item:hover {







    background: var(--bg-hover);







    border-color: var(--primary);







    transform: translateX(4px);







}















.settlement-item.urgent {







    border-left: 4px solid var(--danger);







    background: rgba(239, 68, 68, 0.05);







}















.settlement-item.urgent:hover {







    background: rgba(239, 68, 68, 0.1);







}















.settlement-item.today {







    border-left: 4px solid var(--warning);







    background: rgba(245, 158, 11, 0.05);







}















.settlement-item.today:hover {







    background: rgba(245, 158, 11, 0.1);







}















.settlement-item.upcoming {







    border-left: 4px solid var(--info);







}















.settlement-item.completed {







    opacity: 0.6;







    border-left: 4px solid var(--text-muted);







}















.settlement-info {







    flex: 1;







    min-width: 0;







}















.settlement-market-title {







    font-weight: 600;







    color: var(--text-primary);







    margin-bottom: var(--spacing-xs);







    font-size: 15px;







    overflow: hidden;







    text-overflow: ellipsis;







    white-space: nowrap;







}















.section-title-row {







    display: flex;







    align-items: baseline;







    gap: 12px;







    flex-wrap: wrap;







}















.section-title-note {







    font-size: 12px;







    color: var(--text-muted);







    line-height: 1.2;







    padding: 6px 10px;







    border: 1px solid rgba(255, 255, 255, 0.08);







    background: rgba(255, 255, 255, 0.03);







    border-radius: 999px;







}















.settlement-time {







    font-size: 12px;







    color: var(--text-secondary);







    display: flex;







    align-items: flex-start;







    gap: var(--spacing-xs);







}















.settlement-time-lines {







    display: flex;







    flex-direction: column;







    gap: 2px;







    line-height: 1.2;







}















.settlement-time-line {







    white-space: nowrap;







}















.settlement-time-line-secondary {







    opacity: 0.75;







    font-size: 11px;







}















.settlement-time-icon {







    width: 14px;







    height: 14px;







    opacity: 0.7;







}















.settlement-countdown {







    display: flex;







    flex-direction: column;







    align-items: flex-end;







    gap: var(--spacing-xs);







    margin-left: var(--spacing-lg);







    min-width: 120px;







}















.settlement-countdown-time {







    font-size: 16px;







    font-weight: 700;







    color: var(--primary);







    text-align: right;







}















.settlement-countdown-label {







    font-size: 11px;







    color: var(--text-muted);







    text-align: right;







}















.settlement-item.urgent .settlement-countdown-time {







    color: var(--danger);







}















.settlement-item.today .settlement-countdown-time {







    color: var(--warning);







}















.settlement-item.upcoming .settlement-countdown-time {







    color: var(--info);







}















.settlement-empty {







    text-align: center;







    padding: var(--spacing-2xl);







    color: var(--text-muted);







}















.settlement-empty-icon {







    width: 64px;







    height: 64px;







    margin: 0 auto var(--spacing-lg);







    opacity: 0.3;







}















/* 响应式 - 结算日历 */







@media (max-width: 768px) {







    .settlement-item {







        flex-direction: column;







        align-items: flex-start;







        gap: var(--spacing-md);







    }







    







    .settlement-countdown {







        width: 100%;







        flex-direction: row;







        justify-content: space-between;







        align-items: center;







        margin-left: 0;







    }







    







    .calendar-header {







        flex-direction: column;







        align-items: flex-start;







    }







    







    .calendar-controls {







        width: 100%;







        justify-content: space-between;







    }







    







    .calendar-stats {







        grid-template-columns: repeat(2, 1fr);







    }







}















/* === OPINFLOW_DS_START === */







/* OpinFlow Design System overrides (black + orange gradient + glow).







   Keep layout intact; only change tokens and a few key components. */















:root {







  /* black/orange system */







  --primary: #FF8C42;







  --primary-light: #FFB380;







  --primary-dark: #FF6B1A;







  --primary-hover: var(--primary-dark);















  /* background levels */







  --bg-primary: #141414;







  --bg-secondary: #101010;







  --bg-tertiary: #1A1A1A;







  --bg-card: #1F1F1F;







  --bg-hover: rgba(255, 140, 66, 0.10);















  /* text */







  --text-primary: #F5F5F5;







  --text-secondary: rgba(245, 245, 245, 0.70);







  --text-muted: rgba(245, 245, 245, 0.45);







  --text-inverse: #141414;















  /* borders */







  --border-color: rgba(255, 255, 255, 0.10);







  --border-light: rgba(255, 255, 255, 0.14);















  /* glow */







  --glow-sm: 0 0 15px rgba(255, 140, 66, 0.25);







  --glow-md: 0 0 30px rgba(255, 140, 66, 0.35);







  --glow-lg: 0 0 45px rgba(255, 140, 66, 0.45);















  /* shadow */







  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.35);







  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.45);







  --shadow-lg: 0 18px 60px rgba(0, 0, 0, 0.55);















  /* radius (bigger, softer) */







  --radius-sm: 8px;







  --radius-md: 12px;







  --radius-lg: 16px;







}















body {







  background-color: var(--bg-primary);







}















/* Top header glass */







.header {







  background: rgba(20, 20, 20, 0.92);







  backdrop-filter: blur(14px);







  -webkit-backdrop-filter: blur(14px);







}















.logo-image {







  filter: drop-shadow(0 0 20px rgba(255, 140, 66, 0.40));







}















.logo-text {







  text-shadow: 0 0 20px rgba(255, 140, 66, 0.30);







}















/* Nav buttons */







.header-nav .nav-tab {







  border-radius: var(--radius-md);







}















.header-nav .nav-tab.active {







  background: rgba(255, 140, 66, 0.12);







  border: 1px solid rgba(255, 140, 66, 0.30);







  box-shadow: 0 0 15px rgba(255, 140, 66, 0.15);







}















/* Primary button: gradient + glow */







.btn-primary {







  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 50%, var(--primary) 100%);







  border-radius: var(--radius-md);







  box-shadow: var(--glow-sm);







}















.btn-primary:hover {







  background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);







  box-shadow: var(--glow-md);







  transform: translateY(-1px) scale(1.02);







}















.btn-secondary {







  border-radius: var(--radius-md);







}















.btn-secondary:hover {







  background: rgba(255, 140, 66, 0.10);







  border-color: rgba(255, 140, 66, 0.35);







  box-shadow: 0 0 18px rgba(255, 140, 66, 0.12);







}















/* Stat cards: subtle glow on hover */







.stat-card:hover {







  box-shadow: 0 8px 50px rgba(255, 140, 66, 0.12);







}















/* Hide status indicator (we remove it from HTML, but keep CSS fallback) */







#statusIndicator {







  display: none !important;







}















/* Fullscreen loading overlay (the only loading style we add) */







.global-loading {







  position: fixed;







  inset: 0;







  z-index: 2000;







  display: flex;







  align-items: center;







  justify-content: center;







  background: var(--bg-primary);







}















.global-loading.hidden {







  display: none;







}















.global-loading::before {







  content: '';







  position: absolute;







  top: 30%;







  left: 50%;







  transform: translate(-50%, -50%);







  width: 420px;







  height: 420px;







  background: rgba(255, 140, 66, 0.10);







  filter: blur(110px);







  border-radius: 999px;







  animation: globalGlow 2.2s ease-in-out infinite;







}















@keyframes globalGlow {







  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }







  50% { opacity: 0.75; transform: translate(-50%, -50%) scale(1.15); }







}















.global-loading-inner {







  position: relative;







  z-index: 1;







  display: flex;







  flex-direction: column;







  align-items: center;







  gap: 18px;







  text-align: center;







  padding: 32px;







}















.global-loading-logo {







  position: relative;







  width: 92px;







  height: 92px;







  border-radius: 24px;







  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, var(--primary-dark) 100%);







  box-shadow: 0 0 40px rgba(255, 140, 66, 0.55);







  display: flex;







  align-items: center;







  justify-content: center;







  overflow: hidden;







}















.global-loading-logo::after {







  content: '';







  position: absolute;







  inset: 0;







  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 55%);







  opacity: 0.9;







}















.global-loading-logo img {







  position: relative;







  z-index: 1;







  width: 62px;







  height: 62px;







  object-fit: contain;







  filter: drop-shadow(0 0 30px rgba(255, 140, 66, 0.65));







}















.global-loading-dots {







  display: flex;







  align-items: center;







  gap: 8px;







}















.global-loading-dots span {







  width: 10px;







  height: 10px;







  border-radius: 999px;







  background: var(--primary);







  box-shadow: 0 0 15px rgba(255, 140, 66, 0.80);







  animation: dotBounce 0.9s infinite ease-in-out;







}







.global-loading-dots span:nth-child(2) { animation-delay: -0.15s; background: var(--primary-light); }







.global-loading-dots span:nth-child(3) { animation-delay: -0.30s; background: var(--primary-dark); }















@keyframes dotBounce {







  0%, 100% { transform: translateY(0); opacity: 0.75; }







  50% { transform: translateY(-7px); opacity: 1; }







}















.global-loading-title {







  font-size: 20px;







  font-weight: 700;







  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 55%, var(--primary-dark) 100%);







  -webkit-background-clip: text;







  -webkit-text-fill-color: transparent;







  background-clip: text;







  text-shadow: 0 0 30px rgba(255, 140, 66, 0.25);







}















.global-loading-sub {







  font-size: 13px;







  color: var(--text-muted);







}















/* === OPINFLOW_DS_END === */























/* === OPINFLOW_UI2_CSS_START === */







/* OpinFlow UI2 skin (black + orange gradient + glow). Keep layout intact. */















:root {







  --header-height: 64px;















  --primary: #FF8C42;







  --primary-light: #FFB380;







  --primary-dark: #FF6B1A;







  --primary-hover: var(--primary-dark);















  --bg-primary: #141414;







  --bg-secondary: #101010;







  --bg-tertiary: #1A1A1A;







  --bg-card: #1F1F1F;







  --bg-hover: rgba(255, 140, 66, 0.10);















  --text-primary: #F5F5F5;







  --text-secondary: rgba(245, 245, 245, 0.70);







  --text-muted: rgba(245, 245, 245, 0.45);







  --text-inverse: #141414;















  --border-color: rgba(255, 255, 255, 0.10);







  --border-light: rgba(255, 255, 255, 0.14);















  --glow-sm: 0 0 15px rgba(255, 140, 66, 0.25);







  --glow-md: 0 0 30px rgba(255, 140, 66, 0.35);







  --glow-lg: 0 0 45px rgba(255, 140, 66, 0.45);















  --radius-sm: 8px;







  --radius-md: 12px;







  --radius-lg: 16px;







}















.header {







  background: rgba(20, 20, 20, 0.92);







  backdrop-filter: blur(14px);







  -webkit-backdrop-filter: blur(14px);







}















.btn-primary {







  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 50%, var(--primary) 100%);







  box-shadow: var(--glow-sm);







  border-radius: var(--radius-md);







}







.btn-primary:hover {







  background: linear-gradient(90deg, var(--primary-dark) 0%, var(--primary) 55%, var(--primary-light) 100%);







  box-shadow: var(--glow-md);







}















.btn-icon {







  border-radius: var(--radius-md);







  border: 1px solid rgba(255, 255, 255, 0.10);







  background: rgba(255, 255, 255, 0.02);







  transition: all 0.2s ease;







}







.btn-icon:hover {







  border-color: rgba(255, 140, 66, 0.35);







  background: rgba(255, 140, 66, 0.10);







  box-shadow: 0 0 18px rgba(255, 140, 66, 0.18);







  transform: translateY(-1px);







}















.visit-counter {







  display: inline-flex;







  align-items: center;







  justify-content: center;







  padding: 6px 10px;







  border-radius: 999px;







  border: 1px solid rgba(255, 140, 66, 0.30);







  background: rgba(255, 140, 66, 0.10);







  color: var(--text-primary);







  font-size: 12px;







  font-weight: 700;







  letter-spacing: 0.2px;







  min-width: 56px;







  box-shadow: 0 0 18px rgba(255, 140, 66, 0.12);







}















#statusIndicator { display: none !important; }















/* Content-only fullscreen loading: does NOT cover the top header */







.global-loading {







  position: fixed;







  top: var(--header-height);







  left: 0;







  right: 0;







  bottom: 0;







  z-index: 2000;







  display: flex;







  align-items: center;







  justify-content: center;







  background: var(--bg-primary);







}







.global-loading.hidden { display: none; }







.global-loading::before {







  content: '';







  position: absolute;







  top: 30%;







  left: 50%;







  transform: translate(-50%, -50%);







  width: 420px;







  height: 420px;







  background: rgba(255, 140, 66, 0.10);







  filter: blur(110px);







  border-radius: 999px;







  animation: globalGlow 2.2s ease-in-out infinite;







}







@keyframes globalGlow {







  0%, 100% { opacity: 0.45; transform: translate(-50%, -50%) scale(1); }







  50% { opacity: 0.75; transform: translate(-50%, -50%) scale(1.15); }







}







.global-loading-inner {







  position: relative;







  z-index: 1;







  display: flex;







  flex-direction: column;







  align-items: center;







  gap: 18px;







  text-align: center;







  padding: 32px;







}







.global-loading-logo {







  position: relative;







  width: 92px;







  height: 92px;







  border-radius: 24px;







  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 60%, var(--primary-dark) 100%);







  box-shadow: 0 0 40px rgba(255, 140, 66, 0.55);







  display: flex;







  align-items: center;







  justify-content: center;







  overflow: hidden;







}







.global-loading-logo::after {







  content: '';







  position: absolute;







  inset: 0;







  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 55%);







  opacity: 0.9;







}







.global-loading-logo img {







  position: relative;







  z-index: 1;







  width: 62px;







  height: 62px;







  object-fit: contain;







  filter: drop-shadow(0 0 30px rgba(255, 140, 66, 0.65));







}







.global-loading-dots { display: flex; align-items: center; gap: 8px; }







.global-loading-dots span {







  width: 10px;







  height: 10px;







  border-radius: 999px;







  background: var(--primary);







  box-shadow: 0 0 15px rgba(255, 140, 66, 0.80);







  animation: dotBounce 0.9s infinite ease-in-out;







}







.global-loading-dots span:nth-child(2) { animation-delay: -0.15s; background: var(--primary-light); }







.global-loading-dots span:nth-child(3) { animation-delay: -0.30s; background: var(--primary-dark); }







@keyframes dotBounce {







  0%, 100% { transform: translateY(0); opacity: 0.75; }







  50% { transform: translateY(-7px); opacity: 1; }







}







.global-loading-title {







  font-size: 20px;







  font-weight: 700;







  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 55%, var(--primary-dark) 100%);







  -webkit-background-clip: text;







  -webkit-text-fill-color: transparent;







  background-clip: text;







  text-shadow: 0 0 30px rgba(255, 140, 66, 0.25);







}







.global-loading-sub { font-size: 13px; color: var(--text-muted); }







/* === OPINFLOW_UI2_CSS_END === */































/* Visit counter (header right) */







.visit-counter{







  display:flex;







  align-items:center;







  gap:8px;







  padding:6px 10px;







  border:1px solid rgba(255,138,0,0.35);







  border-radius:999px;







  background: rgba(10,10,12,0.55);







  box-shadow: 0 0 0 1px rgba(255,138,0,0.08), 0 10px 28px rgba(0,0,0,0.35);







  backdrop-filter: blur(10px);







}







.visit-counter-label{







  font-size:12px;







  color: rgba(255,255,255,0.75);







  letter-spacing: 0.2px;







}







.visit-counter-value{







  font-weight: 800;







  font-size: 13px;







  color: var(--accent-primary, #ff8a00);







  text-shadow: 0 0 10px rgba(255,138,0,0.55);







}







/* Legacy loaders (deprecated) — keep only the content-area global overlay */



.loading-state,



.loading-spinner,



.spinner-small,



#marketMonitorLoading,



#settlementCalendarLoading{



  display: none !important;



}











/* Order flow numeric columns: ensure header aligns with numbers (override .order-flow-table th { text-align:left }) */

.order-flow-table th.orders-col,

.order-flow-table th.traders-col,

.order-flow-table td.orders-col,

.order-flow-table td.traders-col{

  text-align: right;

  font-variant-numeric: tabular-nums;
}

/* ============================================
   投票横幅 (Vote Banner)
   ============================================ */
.vote-banner-container {
    position: relative;
    width: 100%;
    margin-top: 64px; /* Space for fixed header */
    padding: 12px 0;
    background: radial-gradient(circle at 50% 50%, rgba(255,140,66,0.1), transparent 70%);
    overflow: hidden;
    z-index: 90;
    margin-bottom: 10px; /* Reduced space before main content */
}

@media (max-width: 768px) {
    .vote-banner-container {
        margin-top: 120px; /* Mobile header height approximation */
        padding: 8px 0;
    }
    
    .vote-banner-content {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
    
    .vote-banner-line-top, .vote-banner-line-bottom {
        width: 100%;
        left: 0;
        right: 0;
    }
}

/* Override main-content margin since banner handles the top spacing */
.main-content {
    margin-top: 0 !important;
}

/* Gradient Lines */
.vote-banner-line-top,
.vote-banner-line-bottom {
    position: absolute;
    width: 384px;
    height: 1px;
    opacity: 0.5;
}

.vote-banner-line-top {
    top: 0;
    left: 25%;
    background: linear-gradient(to right, transparent, var(--primary), transparent);
}

.vote-banner-line-bottom {
    bottom: 0;
    right: 25%;
    background: linear-gradient(to right, transparent, var(--primary-light), transparent);
}

.vote-banner-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 14px;
    font-weight: 500;
}

/* Text Styles */
.gradient-text-orange {
    background: linear-gradient(to right, #FF8A4A, #F37021);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 15px rgba(255,140,66,0.3);
    font-weight: bold;
}

.text-glow {
    text-shadow: 0 0 20px rgba(255,140,66,0.4);
    color: var(--primary);
    font-weight: bold;
}

.vote-id-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 20px;
    background: #F37021; /* Flatter background */
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    margin-left: 8px;
    text-shadow: none;
}

/* Button Styles */
.vote-btn-shiny {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 20px;
    background: #F37021; /* Flatter background */
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    overflow: hidden;
}

.vote-btn-shiny:hover {
    transform: scale(1.05);
    background: #FF8A4A;
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

/* Inner Glow Effect - subtle */
.vote-btn-shiny::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
    opacity: 0.5;
    transition: opacity 0.3s;
}

.vote-btn-shiny:hover::before {
    opacity: 1;
}

.icon-sparkle {
    width: 16px;
    height: 16px;
    color: rgba(243, 112, 33, 0.6);
    display: inline-block;
    vertical-align: middle;
}

.icon-white {
    width: 14px;
    height: 14px;
    color: #fff;
    display: inline-block;
    vertical-align: middle;
}



/* Christmas Hat SVG Position */
.christmas-hat-svg {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); /* 增加立体投影 */
}

.hat-on-logo {
    top: -28px;     /* 往上提，避免遮挡logo */
    right: -4px;    
    width: 42px;    
    height: 42px;
}

.cny-firework {
    position: absolute;
    top: -18px;
    left: -18px;
    width: 44px;
    height: 44px;
    z-index: 5;
    pointer-events: none;
    opacity: 0.85;
    filter: drop-shadow(0 2px 10px rgba(255, 138, 0, 0.22)) drop-shadow(0 0 8px rgba(255, 59, 48, 0.12));
}

.cny-firework .fw-burst {
    transform-origin: 30px 30px;
    opacity: 0;
    transform: scale(0.55);
    animation: cnyFirework 7.2s ease-in-out infinite;
}

.cny-firework .fw-burst-2 {
    animation-delay: 2.6s;
}

.cny-firework .fw-burst-3 {
    animation-delay: 4.8s;
}

@keyframes cnyFirework {
    0% { opacity: 0; transform: scale(0.55); }
    7% { opacity: 0.82; transform: scale(0.98); }
    14% { opacity: 0.22; transform: scale(1.12); }
    20% { opacity: 0; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
    .cny-firework .fw-burst {
        animation: none !important;
        opacity: 0.18;
        transform: scale(1);
    }
}


.social-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
    text-decoration: none;
    backdrop-filter: blur(4px);
    margin-left: 4px;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(243, 112, 33, 0.2), rgba(243, 112, 33, 0));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.social-link::after {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, #F37021, transparent 60%);
    opacity: 0;
    z-index: -1;
    border-radius: 10px;
    transition: opacity 0.4s ease;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.social-link svg {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 0 rgba(243, 112, 33, 0));
}

.social-link:hover {
    color: #fff;
    transform: translateY(-2px) scale(1.05);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 15px rgba(243, 112, 33, 0.2);
    border-color: rgba(243, 112, 33, 0.3);
}

.social-link:hover::before {
    opacity: 1;
}

.social-link:hover svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(243, 112, 33, 0.6));
}