/* ===== AI 金融智能终端 — 专业深色主题 ===== */

:root {
    --bg-primary: #0a0e17;
    --bg-secondary: #111827;
    --bg-tertiary: #1a2332;
    --bg-hover: #243044;
    --border-color: #2a3441;
    --text-primary: #e1e7ef;
    --text-secondary: #8b95a7;
    --text-muted: #5a6478;
    --accent-blue: #3b82f6;
    --accent-cyan: #06b6d4;
    --color-up: #ef4444;
    --color-down: #22c55e;
    --color-flat: #8b95a7;
    --color-buy: #ef4444;
    --color-sell: #22c55e;
    --shadow: 0 4px 20px rgba(0,0,0,0.4);
    --radius: 8px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    overflow-x: hidden;
}

/* ===== 顶部导航 ===== */
.top-bar {
    display: flex;
    align-items: center;
    height: 48px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 0 16px;
    gap: 24px;
}

.brand {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-cyan);
    white-space: nowrap;
}

.brand .logo {
    margin-right: 4px;
}

.indices-bar {
    display: flex;
    gap: 20px;
    flex: 1;
    overflow: hidden;
}

.index-item {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.index-name {
    color: var(--text-secondary);
    font-size: 12px;
}

.index-value {
    font-weight: 600;
    font-size: 13px;
}

.index-change {
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 3px;
}

.clock {
    color: var(--text-secondary);
    font-size: 12px;
    font-family: "SF Mono", "Fira Code", monospace;
}

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

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.live-dot.live-on {
    background: #ef4444;
    animation: live-pulse 2s infinite;
}

.live-dot.live-off {
    background: #6b7280;
    opacity: 0.6;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(239,68,68,0.8); }
    50% { opacity: 0.4; box-shadow: 0 0 8px rgba(239,68,68,0.4); }
}

.market-closed-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(107, 114, 128, 0.2);
    color: #6b7280;
    font-size: 10px;
    font-weight: 600;
    margin-left: 4px;
    vertical-align: middle;
}

.quote-timestamp {
    font-size: 10px;
    color: var(--text-secondary);
    font-family: "SF Mono", "Fira Code", monospace;
    margin-left: 8px;
}

.live-indicator {
    font-size: 11px;
    font-family: "SF Mono", "Fira Code", monospace;
    color: #5a6478;
    transition: color 0.3s;
}

.live-indicator.pulse {
    color: #22c55e;
}

/* ===== 主布局 ===== */
.main-grid {
    display: grid;
    grid-template-columns: 220px 1fr 300px;
    gap: 1px;
    background: var(--border-color);
    min-height: calc(100vh - 48px - 280px);
}

/* ===== 左侧边栏 ===== */
.sidebar {
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* AI 智能选股 Tab */
.smart-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.smart-tab {
    flex: 1;
    padding: 8px 4px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-bottom: 2px solid transparent;
}

.smart-tab:hover {
    color: var(--text-secondary);
    background: var(--bg-hover);
}

.smart-tab.active {
    color: var(--accent-cyan);
    border-bottom: 2px solid var(--accent-cyan);
    background: rgba(6,182,212,0.05);
}

.smart-tab-icon {
    font-size: 10px;
}

.smart-list-header {
    padding: 6px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.smart-list-header span:first-child {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 500;
}

.smart-list-meta {
    font-size: 10px;
    color: var(--text-muted);
}

.search-box {
    padding: 10px;
}

.search-box input {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.search-box input:focus {
    border-color: var(--accent-blue);
}

.search-box input::placeholder {
    color: var(--text-muted);
}

.stock-list-header {
    padding: 8px 12px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid var(--border-color);
}

.stock-list {
    flex: 1;
    overflow-y: auto;
}

.stock-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(42,52,65,0.5);
    transition: background 0.15s;
}

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

.stock-item.active {
    background: var(--bg-hover);
    border-left: 3px solid var(--accent-cyan);
}

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

.stock-item-name {
    font-size: 13px;
    font-weight: 500;
}

.stock-item-code {
    font-size: 11px;
    color: var(--text-muted);
}

.stock-item-price {
    text-align: right;
}

.stock-item-price .price {
    font-size: 13px;
    font-weight: 600;
}

.stock-item-price .pct {
    font-size: 11px;
}

/* AI 智能排名股票项 */
.stock-item.smart {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px 12px;
}

.smart-stock-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.smart-stock-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.smart-stock-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    background: var(--bg-hover);
    color: var(--text-muted);
    margin-right: 4px;
}

.smart-stock-rank.top1 { background: rgba(239,68,68,0.25); color: #ef4444; }
.smart-stock-rank.top2 { background: rgba(251,191,36,0.25); color: #fbbf24; }
.smart-stock-rank.top3 { background: rgba(59,130,246,0.25); color: #3b82f6; }

.smart-stock-name-row {
    display: flex;
    align-items: center;
}

.smart-stock-name {
    font-size: 13px;
    font-weight: 500;
}

.smart-stock-sector {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 1px;
}

.smart-stock-right {
    text-align: right;
}

.smart-stock-price {
    font-size: 12px;
    font-weight: 600;
    font-family: "SF Mono", monospace;
}

.smart-stock-change {
    font-size: 10px;
}

.smart-prob-bar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.smart-prob-track {
    flex: 1;
    height: 4px;
    background: var(--bg-hover);
    border-radius: 2px;
    overflow: hidden;
}

.smart-prob-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}

.smart-prob-val {
    font-size: 11px;
    font-weight: 700;
    font-family: "SF Mono", monospace;
    min-width: 32px;
    text-align: right;
}

.smart-prob-val.high { color: #ef4444; }
.smart-prob-val.med { color: #fbbf24; }
.smart-prob-val.low { color: #8b95a7; }

.smart-stock-reasons {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.smart-phase-tag {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 2px;
    font-weight: 600;
    margin-left: 4px;
}

.smart-phase-tag.bought { background: rgba(239,68,68,0.2); color: #ef4444; }
.smart-phase-tag.diverged { background: rgba(251,191,36,0.2); color: #fbbf24; }
.smart-phase-tag.strong { background: rgba(59,130,246,0.2); color: #3b82f6; }
.smart-phase-tag.idle { background: rgba(90,100,120,0.2); color: var(--text-muted); }

/* ===== 中间图表区 ===== */
.chart-area {
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 8px;
    overflow: hidden;       /* 防止 canvas 撑爆容器 */
    min-height: 0;          /* 允许在 grid 中收缩 */
}

.stock-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0;
    height: 36px;          /* 固定高度，避免内容变化时挤压下方canvas */
    overflow: hidden;
    flex-shrink: 0;        /* 不允许压缩，保证canvas空间稳定 */
}

.stock-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    height: 100%;
}

/* 内联加载指示器（用于header中，不替换整个header） */
.stock-loading-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    color: var(--text-muted);
    font-size: 12px;
}

.stock-loading-inline .loading-spinner {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
}

/* K线区域loading遮罩 — 半透明而非清空，避免白屏 */
.chart-area.chart-loading .chart-canvas,
.chart-area.chart-loading .sub-canvas {
    opacity: 0.35;
    transition: opacity 0.2s ease;
}

.loading-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

.stock-name {
    font-size: 18px;
    font-weight: 700;
}

.stock-price {
    font-size: 24px;
    font-weight: 700;
    font-family: "SF Mono", monospace;
}

.stock-change {
    font-size: 14px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
}

.chart-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

.chart-tabs > div:first-child {
    display: flex;
    gap: 4px;
}

.tab-btn {
    padding: 4px 12px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.15s;
}

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

.period-selector {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.period-btn {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
}

.period-btn.active {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent-cyan);
}

/* 自动轮播按钮 */
.period-btn.auto-btn {
    margin-right: 6px;
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    font-weight: 600;
}
.period-btn.auto-btn.active {
    background: var(--accent-cyan);
    color: var(--bg-primary);
    animation: autoCyclePulse 1.5s ease-in-out infinite;
}
@keyframes autoCyclePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.chart-canvas {
    width: 100%;            /* 显式宽度，防止 canvas intrinsic width 干扰布局 */
    flex: 1 1 0;            /* grow + shrink + 0 basis，不依赖 intrinsic size */
    min-height: 300px;
    max-height: 500px;      /* 硬上限，防止首次布局未稳定时撑得过大 */
    background: var(--bg-secondary);
    border-radius: var(--radius);
    cursor: crosshair;
    overflow: hidden;
    display: block;
}

.sub-chart-tabs {
    display: flex;
    gap: 4px;
    flex-shrink: 0;    /* 不允许压缩 */
}

.sub-tab {
    padding: 3px 10px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 11px;
}

.sub-tab.active {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}

.sub-canvas {
    width: 100%;
    height: 140px;
    max-height: 140px;      /* 固定高度，不允许变化 */
    background: var(--bg-secondary);
    border-radius: var(--radius);
    cursor: crosshair;
    display: block;
    flex-shrink: 0;
}

/* ===== 右侧AI智能体团队 ===== */
.analysis-panel {
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.analysis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
}

.agent-team-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-cyan);
}

.agent-team-status {
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(139,149,167,0.15);
    transition: all 0.3s;
}

.agent-team-status.working {
    color: var(--accent-cyan);
    background: rgba(0,200,255,0.12);
    animation: pulse-status 1.5s ease-in-out infinite;
}

.agent-team-status.done {
    color: var(--color-up);
    background: rgba(239,68,68,0.1);
}

@keyframes pulse-status {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* 综合评分条 */
.agent-score-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

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

.agent-score-label {
    font-size: 11px;
    color: var(--text-muted);
}

.agent-score-rating {
    font-size: 14px;
    font-weight: 600;
}

.agent-score-value {
    font-size: 32px;
    font-weight: 800;
    font-family: "SF Mono", monospace;
    line-height: 1;
    transition: color 0.3s;
}

/* 智能体容器 */
.agents-container {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
}

.agents-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 12px;
    padding: 50px 0;
    text-align: center;
}

.agents-idle-icon {
    font-size: 36px;
    opacity: 0.4;
    animation: idle-bob 2s ease-in-out infinite;
}

@keyframes idle-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* 智能体卡片 */
.agent-card {
    display: flex;
    gap: 10px;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: rgba(139,149,167,0.06);
    border: 1px solid transparent;
    transition: all 0.4s;
    opacity: 0;
    transform: translateX(20px);
}

.agent-card.active {
    opacity: 1;
    transform: translateX(0);
}

.agent-card.working {
    border-color: rgba(0,200,255,0.2);
    background: rgba(0,200,255,0.05);
}

.agent-card.done {
    border-color: rgba(139,149,167,0.12);
}

/* 头像 */
.agent-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    background: rgba(139,149,167,0.1);
    transition: all 0.3s;
    position: relative;
}

.agent-card.working .agent-avatar {
    background: rgba(0,200,255,0.12);
    box-shadow: 0 0 12px rgba(0,200,255,0.25);
    animation: avatar-glow 1.2s ease-in-out infinite;
}

@keyframes avatar-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(0,200,255,0.15); }
    50% { box-shadow: 0 0 16px rgba(0,200,255,0.4); }
}

/* 卡片内容 */
.agent-body {
    flex: 1;
    min-width: 0;
}

.agent-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 3px;
}

.agent-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.agent-verdict {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}

.agent-card.done .agent-verdict {
    opacity: 1;
}

.agent-verdict.bullish {
    background: rgba(239,68,68,0.15);
    color: var(--color-up);
}

.agent-verdict.bearish {
    background: rgba(34,197,94,0.15);
    color: var(--color-down);
}

.agent-verdict.neutral {
    background: rgba(139,149,167,0.15);
    color: var(--text-muted);
}

/* 工作中状态 */
.agent-status {
    font-size: 11px;
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 16px;
}

.typing-dots {
    display: inline-flex;
    gap: 3px;
}

.typing-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-cyan);
    animation: typing 1.4s ease-in-out infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* 分析报告 */
.agent-report {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-top: 4px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s;
}

.agent-card.done .agent-report {
    max-height: 100px;
    opacity: 1;
    margin-top: 4px;
}

.agent-report-item {
    display: flex;
    gap: 6px;
    padding: 2px 0;
}

.agent-report-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.agent-report-dot.bullish { background: var(--color-up); }
.agent-report-dot.bearish { background: var(--color-down); }
.agent-report-dot.neutral { background: var(--color-flat); }

.signal-list {
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
    max-height: 200px;
    overflow-y: auto;
}

.signal-list-title {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.strategy-signal {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
}

.signal-tag {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}

.signal-tag.buy { background: rgba(239,68,68,0.2); color: var(--color-up); }
.signal-tag.sell { background: rgba(34,197,94,0.2); color: var(--color-down); }

/* ===== 底部回测区 ===== */
.backtest-section {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 14px 16px;
    min-height: 280px;
}

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

.section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-cyan);
}

.backtest-controls {
    display: flex;
    gap: 8px;
    align-items: center;
}

#strategySelect {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 13px;
    outline: none;
    cursor: pointer;
}

.action-btn {
    padding: 6px 16px;
    background: var(--accent-blue);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: opacity 0.15s;
}

.action-btn:hover {
    opacity: 0.85;
}

.action-btn.secondary {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

.backtest-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

.backtest-metrics {
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    padding: 14px;
}

.metric-placeholder {
    color: var(--text-muted);
    text-align: center;
    padding: 30px 0;
    font-size: 13px;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(42,52,65,0.5);
}

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

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

.metric-value {
    font-weight: 600;
    font-family: "SF Mono", monospace;
    font-size: 14px;
}

.metric-value.positive { color: var(--color-up); }
.metric-value.negative { color: var(--color-down); }

.equity-chart-wrapper {
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    padding: 8px;
}

.equity-canvas {
    width: 100%;
    height: 200px;
}

/* 策略对比表 */
.strategy-compare {
    margin-top: 8px;
}

.strategy-compare table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.strategy-compare th {
    text-align: left;
    padding: 6px 8px;
    color: var(--text-muted);
    font-weight: 500;
    border-bottom: 1px solid var(--border-color);
}

.strategy-compare td {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(42,52,65,0.5);
}

/* 交易明细表 */
.trade-detail-wrapper {
    margin-top: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.trade-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.trade-table th {
    text-align: left;
    padding: 6px 10px;
    color: var(--text-muted);
    font-weight: 500;
    background: var(--bg-tertiary);
    position: sticky;
    top: 0;
}

.trade-table td {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(42,52,65,0.3);
}

.trade-table .buy { color: var(--color-up); }
.trade-table .sell { color: var(--color-down); }

/* ===== 通用 ===== */
.loading-text {
    color: var(--text-muted);
    font-size: 12px;
}

.text-up { color: var(--color-up); }
.text-down { color: var(--color-down); }

/* 滚动条 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* 加载动画 */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ===== 强势股扫描 ===== */
.scanner-section {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 14px 16px;
}

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

.scanner-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}

.scan-legend {
    display: flex;
    gap: 12px;
}

.legend-item {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: 500;
}

.legend-bought {
    background: rgba(239,68,68,0.15);
    color: var(--color-up);
    border: 1px solid rgba(239,68,68,0.3);
}

.legend-diverged {
    background: rgba(251,191,36,0.15);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.3);
}

.legend-strong {
    background: rgba(59,130,246,0.15);
    color: var(--accent-blue);
    border: 1px solid rgba(59,130,246,0.3);
}

.scan-status {
    font-size: 12px;
    color: var(--text-secondary);
}

.scanner-results {
    max-height: 400px;
    overflow-y: auto;
}

.scan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.scan-table th {
    text-align: left;
    padding: 8px 12px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 12px;
    background: var(--bg-tertiary);
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--border-color);
}

.scan-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(42,52,65,0.4);
    cursor: pointer;
    transition: background 0.15s;
}

.scan-table tr:hover td {
    background: var(--bg-hover);
}

.scan-table .col-name {
    font-weight: 600;
}

.scan-table .col-code {
    color: var(--text-muted);
    font-size: 11px;
    font-family: "SF Mono", monospace;
}

.phase-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}

.phase-badge.bought {
    background: rgba(239,68,68,0.2);
    color: var(--color-up);
}

.phase-badge.diverged {
    background: rgba(251,191,36,0.2);
    color: #fbbf24;
}

.phase-badge.strong {
    background: rgba(59,130,246,0.2);
    color: var(--accent-blue);
}

.phase-badge.idle {
    background: rgba(90,100,120,0.2);
    color: var(--text-muted);
}

.scan-reason {
    font-size: 11px;
    color: var(--text-secondary);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== 十五五板块扫描 ===== */
.sector-section {
    background: var(--bg-secondary);
    border-top: 2px solid var(--accent-blue);
    padding: 14px 16px;
}

.sector-select {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px 12px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
}

.sector-select:hover {
    border-color: var(--accent-blue);
}

.sector-select option {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.sector-overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.sector-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.sector-card:hover {
    border-color: var(--accent-blue);
    transform: translateY(-1px);
    box-shadow: 0 2px 12px rgba(59,130,246,0.15);
}

.sector-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sector-card-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.sector-card-avg {
    font-weight: 700;
    font-size: 14px;
}

.sector-card-updown {
    color: var(--text-muted);
}

.sector-card-top {
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sector-scan-results {
    margin-top: 12px;
}

.scan-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.scan-summary .summary-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.scan-summary .summary-num {
    font-weight: 700;
    font-size: 16px;
}

.sector-scan-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.sector-scan-table th {
    text-align: left;
    padding: 8px 10px;
    color: var(--text-muted);
    font-weight: 500;
    font-size: 12px;
    background: var(--bg-tertiary);
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.sector-scan-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(42,52,65,0.4);
    white-space: nowrap;
}

.sector-scan-table tr:hover td {
    background: var(--bg-hover);
}

.sector-scan-table .stock-link {
    color: var(--accent-cyan);
    cursor: pointer;
    text-decoration: underline;
    font-weight: 600;
}

.sector-scan-table .stock-link:hover {
    color: var(--accent-blue);
}

.sector-tag {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(59,130,246,0.15);
    color: var(--accent-blue);
    border: 1px solid rgba(59,130,246,0.2);
    white-space: nowrap;
}

.view-chart-btn {
    background: rgba(59,130,246,0.15);
    color: var(--accent-blue);
    border: 1px solid rgba(59,130,246,0.3);
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
}

.view-chart-btn:hover {
    background: var(--accent-blue);
    color: white;
}