/* =====================================================
   Option Analyzer - Dark Mode Financial UI
   ===================================================== */

/* ===== CSS Custom Properties ===== */
:root {
    --bg-primary: #0a0e14;
    --bg-secondary: #111820;
    --bg-tertiary: #1a2332;
    --bg-card: #151d28;
    --bg-hover: #1e2a3a;
    --border-color: #253040;
    --border-light: #2a3a4e;

    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --text-muted: #5a6672;

    --accent: #58a6ff;
    --accent-dim: #1f3a5f;

    --profit: #00e676;
    --profit-dim: #00e67620;
    --profit-bg: #00e67615;
    --loss: #ff5252;
    --loss-dim: #ff525220;
    --loss-bg: #ff525215;

    --delta-color: #42a5f5;
    --gamma-color: #ab47bc;
    --theta-color: #ffa726;
    --vega-color: #ffee58;
    --rho-color: #26c6da;

    --sigma1-color: rgba(255, 255, 255, 0.25);
    --sigma2-color: rgba(255, 255, 255, 0.12);

    --panel-radius: 8px;
    --card-radius: 6px;
    --transition: all 0.2s ease;
}

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

html, body {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
}

#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

h2, h3 {
    font-weight: 600;
    color: var(--text-primary);
}

h2 { font-size: 15px; }
h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); }

/* ===== Scrollbar ===== */
::-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);
}

/* ===== TOP BAR ===== */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    z-index: 100;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.top-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.top-nav .nav-item {
    color: #8b949e;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.top-nav .nav-item:hover {
    color: #e6edf3;
    background: rgba(255, 255, 255, 0.06);
}

.top-nav .nav-item.active {
    color: #e6edf3;
    background: rgba(255, 255, 255, 0.08);
}

.logo {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.3px;
    margin-right: 24px;
    white-space: nowrap;
    flex-shrink: 0;
}

.logo a {
    color: var(--accent);
    text-decoration: none;
}

.asset-selector {
    display: flex;
    align-items: center;
}

.price-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.1;
    gap: 1px;
}

.current-price {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.price-change {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.price-change.up { color: var(--profit); }
.price-change.down { color: var(--loss); }

.top-bar-center {
    display: flex;
    align-items: center;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-menu-trigger {
    color: #8b949e;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}

.user-menu-trigger:hover {
    color: #e6edf3;
    background: rgba(255, 255, 255, 0.06);
}

.market-status {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 10px;
}

.market-status.open {
    color: var(--profit);
    background: var(--profit-bg);
    border: 1px solid var(--profit-dim);
}

.market-status.closed {
    color: var(--loss);
    background: var(--loss-bg);
    border: 1px solid var(--loss-dim);
}

.market-status.pre-post {
    color: #ffa726;
    background: rgba(255, 167, 38, 0.1);
    border: 1px solid rgba(255, 167, 38, 0.3);
}

/* ===== VIEW CONTAINERS ===== */
.view-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ===== STRATEGY LAYOUT (3-column) ===== */
.strategy-layout {
    display: grid;
    grid-template-columns: 280px 1fr 240px;
    flex: 1;
    min-height: 0;
    gap: 0;
}

.left-panel, .right-panel {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    padding: 12px;
}

.right-panel {
    border-right: none;
    border-left: 1px solid var(--border-color);
    overflow: visible;
}

.center-panel {
    display: flex;
    flex-direction: column;
    padding: 12px;
    overflow-y: auto;
}

/* ===== PANEL SECTIONS ===== */
.panel-section {
    margin-bottom: 16px;
}

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

/* Strike% Tooltip */
.strike-pct-tip {
    position: relative;
    color: var(--text-muted);
    cursor: help;
    font-size: 14px;
}

.strike-pct-tip:hover {
    color: var(--accent);
}

.strike-pct-tooltip {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 100;
    width: 240px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--card-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.strike-pct-tip:hover .strike-pct-tooltip {
    display: block;
}

.strike-pct-tooltip b {
    color: var(--text-primary);
}

.strike-pct-tooltip p {
    margin: 4px 0;
}

.strike-pct-tooltip ul {
    margin: 4px 0;
    padding-left: 16px;
}

.strike-pct-tooltip li {
    margin: 2px 0;
}

/* Indicator Tooltip (generic) */
.indicator-tip {
    position: relative;
    color: var(--text-muted);
    cursor: help;
    font-size: 12px;
    margin-left: 2px;
    vertical-align: middle;
}

.indicator-tip:hover {
    color: var(--accent);
}

.indicator-tooltip {
    display: none;
    position: fixed;
    z-index: 9999;
    width: 280px;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--card-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    white-space: normal;
    text-align: left;
}

.indicator-tip:hover .indicator-tooltip {
    display: block;
}

.indicator-tooltip b {
    color: var(--text-primary);
}

.indicator-tooltip .tip-formula {
    display: block;
    margin-top: 4px;
    padding: 4px 8px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 11px;
    color: var(--accent);
}


/* ===== LEG CARDS ===== */
.legs-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 400px;
    overflow-y: auto;
}

.leg-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: 5px 8px;
    transition: var(--transition);
}

.leg-card:hover {
    border-color: var(--border-light);
}

.leg-card.long {
    border-left: 3px solid var(--profit);
}

.leg-card.short {
    border-left: 3px solid var(--loss);
}

.leg-card.chain-filling {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 0 8px rgba(88, 166, 255, 0.25);
    animation: chain-pulse 1.5s ease-in-out infinite;
}

@keyframes chain-pulse {
    0%, 100% { box-shadow: 0 0 0 1px var(--accent), 0 0 8px rgba(88, 166, 255, 0.15); }
    50% { box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(88, 166, 255, 0.35); }
}

.chain-fill-hint {
    font-size: 11px;
    color: var(--text-dim);
    margin-left: auto;
    white-space: nowrap;
}

.chain-fill-hint.active {
    color: var(--accent);
    font-weight: 600;
}

.chain-fill-hint.done {
    color: var(--profit);
}

.leg-header {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.leg-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
}

.leg-badge.long {
    color: var(--profit);
    background: var(--profit-bg);
}

.leg-badge.short {
    color: var(--loss);
    background: var(--loss-bg);
}

.leg-type-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.leg-type-badge.call {
    color: var(--delta-color);
    background: rgba(66, 165, 245, 0.12);
}

.leg-type-badge.put {
    color: var(--theta-color);
    background: rgba(255, 167, 38, 0.12);
}

.leg-expiry-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 3px;
}

.leg-expiry-badge.near {
    color: #4fc3f7;
    background: rgba(79, 195, 247, 0.12);
}

.leg-expiry-badge.far {
    color: #ce93d8;
    background: rgba(206, 147, 216, 0.12);
}

.leg-delete {
    margin-left: auto;
    color: var(--text-muted) !important;
    font-size: 14px !important;
}

.leg-delete:hover {
    color: var(--loss) !important;
}

.leg-fields-compact {
    padding: 0;
}

.leg-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.leg-info-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    white-space: nowrap;
}

.leg-info-item label {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.2px;
}

.leg-qty-item {
    margin-left: auto;
}

.leg-qty-item .el-input-number {
    width: 80px !important;
}

/* ===== LEG FUNDAMENTALS (option chain indicators) ===== */
.leg-fundamentals-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed var(--border-color);
}

/* Keep .field-group for other uses outside leg cards */
.field-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.field-group label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.field-group .el-input-number,
.field-group .el-select {
    width: 100% !important;
}

.field-readonly {
    display: block;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    padding: 4px 0;
    line-height: 28px;
}

/* ===== SLIDERS ===== */
.slider-group {
    margin-bottom: 14px;
}

.slider-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.slider-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.slider-value.up { color: var(--profit); }
.slider-value.down { color: var(--loss); }

/* ===== ACTIVE LEGS BAR ===== */
.active-legs-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    flex-wrap: wrap;
}

.active-legs-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.active-legs-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
}

.active-leg-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-primary);
    transition: var(--transition);
}

.active-leg-tag.long {
    border-left: 3px solid var(--profit);
}

.active-leg-tag.short {
    border-left: 3px solid var(--loss);
}

.active-leg-tag .tag-dir {
    font-weight: 700;
    font-size: 10px;
    padding: 0 3px;
    border-radius: 2px;
}

.active-leg-tag.long .tag-dir {
    color: var(--profit);
    background: var(--profit-bg);
}

.active-leg-tag.short .tag-dir {
    color: var(--loss);
    background: var(--loss-bg);
}

.active-leg-tag .tag-type {
    font-size: 10px;
    padding: 0 3px;
    border-radius: 2px;
}

.active-leg-tag.call .tag-type {
    color: var(--delta-color);
    background: rgba(66, 165, 245, 0.12);
}

.active-leg-tag.put .tag-type {
    color: var(--theta-color);
    background: rgba(255, 167, 38, 0.12);
}

.active-leg-tag .tag-strike {
    color: var(--text-primary);
}

.active-leg-tag .tag-expiry {
    color: var(--text-muted);
    font-size: 10px;
}

.active-leg-tag .tag-premium {
    color: var(--text-secondary);
    font-weight: 500;
}

.active-leg-tag .tag-qty {
    color: var(--accent);
    font-size: 10px;
}

.active-leg-tag .tag-remove {
    cursor: pointer;
    color: var(--text-muted);
    font-size: 12px;
    margin-left: 2px;
    transition: color 0.15s;
}

.active-leg-tag .tag-remove:hover {
    color: var(--loss);
}

.active-legs-cost {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.active-legs-cost.profit { color: var(--profit); }
.active-legs-cost.loss { color: var(--loss); }

/* ===== STRATEGY EXPLANATION ===== */
.strategy-reason-content {
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
    padding: 10px 12px;
    background: rgba(88, 166, 255, 0.05);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
}

.strategy-explain-content {
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
    /* 高度自适应：随内容自然撑开，由左侧面板(.left-panel overflow-y:auto)统一滚动，
       不再固定 max-height 导致内容被截断遮挡 */
    padding-right: 4px;
}

.strategy-explain-content h2 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

.strategy-explain-content p {
    margin-bottom: 6px;
}

.strategy-explain-content strong {
    color: var(--text-primary);
}

.strategy-explain-content ul,
.strategy-explain-content ol {
    padding-left: 16px;
    margin-bottom: 6px;
}

.strategy-explain-content li {
    margin-bottom: 2px;
}

/* ===== CHART CONTAINERS ===== */
.chart-container {
    height: 320px;
    flex-shrink: 0;
    width: 100%;
}

.chart-container-full {
    height: calc(100vh - 160px);
}

.chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.chart-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* 损益图自定义图例（替代 ECharts 内置图例，带 tips 说明）；色块与曲线样式一致 */
.pnl-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 2px 0 8px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.pnl-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pnl-legend-swatch {
    display: inline-block;
    width: 20px;
    height: 0;
    vertical-align: middle;
}

.pnl-legend-swatch.expiry {
    border-top: 3px solid var(--text-primary);
}

.pnl-legend-swatch.t0 {
    border-top: 2px dashed var(--accent);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--card-radius);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
}

.stat-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-value {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.stat-item.profit .stat-value { color: var(--profit); }
.stat-item.loss .stat-value { color: var(--loss); }
.stat-item.neutral .stat-value { color: var(--accent); }
.stat-item.info .stat-value { color: var(--vega-color); }

/* ===== GREEKS DASHBOARD ===== */
.greeks-timestamp {
    font-size: 11px;
    color: var(--accent);
    font-weight: 600;
}

.greeks-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.greek-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: 8px 10px;
}

.greek-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.greek-symbol {
    font-size: 14px;
    font-weight: 700;
}

.greek-name {
    font-size: 11px;
    color: var(--text-muted);
}

.greek-value {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-bottom: 4px;
}

.greek-bar-track {
    height: 3px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 3px;
}

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

.greek-desc {
    font-size: 10px;
    color: var(--text-muted);
}

/* ===== STRATEGY SUMMARY ===== */
.summary-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-color);
}

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

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

.summary-value {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.summary-value.profit { color: var(--profit); }
.summary-value.loss { color: var(--loss); }

/* ===== VIEW TITLE ===== */
.view-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.view-title i {
    margin-right: 4px;
    color: var(--accent);
}

/* ===== OPTION CHAIN ===== */
.chain-toggle-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.chain-label {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.chain-expiry-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 期权链数据时段提醒（与「期权链」按钮水平对齐，居中醒目展示） */
.chain-warning {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 4px;
    background: rgba(230, 162, 60, 0.15);
    border: 1px solid rgba(230, 162, 60, 0.45);
    color: #e6a23c;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.chain-warning i {
    font-size: 16px;
    flex-shrink: 0;
}

.option-chain-panel {
    height: 420px;
    display: flex;
    flex-direction: row;
    background: var(--bg-primary);
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
    overflow: hidden;
}

/* ===== CHAIN SPLIT LAYOUT ===== */
.chain-left {
    flex: 1;
    min-width: 0;
    overflow: auto;
    border-right: 1px solid var(--border-color);
}

.chain-right {
    width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg-secondary);
}

.kline-chart-wrapper {
    flex-shrink: 0;
    height: 300px;
    padding: 4px;
}

.kline-chart-container {
    width: 100%;
    height: 100%;
}

/* ===== STOCK INFO CARD ===== */
.stock-info-card {
    flex-shrink: 0;
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

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

.info-card-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.info-card-price {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.info-card-price.up { color: var(--profit); }
.info-card-price.down { color: var(--loss); }

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    border-bottom: 1px solid var(--border-color);
}

.info-item:nth-last-child(-n+2) {
    border-bottom: none;
}

.info-label {
    font-size: 10px;
    color: var(--text-muted);
    white-space: nowrap;
}

.info-value {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.chain-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.chain-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.chain-table th {
    padding: 4px 8px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
}

.chain-side-header.call-header {
    color: var(--delta-color);
    border-bottom: 2px solid var(--delta-color);
}

.chain-side-header.put-header {
    color: var(--theta-color);
    border-bottom: 2px solid var(--theta-color);
}

.chain-strike-header {
    background: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    font-weight: 700;
    min-width: 70px;
}

.chain-sub-header th {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted);
    padding: 3px 8px;
}

.chain-table td {
    padding: 3px 8px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.chain-cell {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.chain-itm-cell {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent);
    padding: 3px 4px;
}

.chain-cell.call-cell:hover {
    background: rgba(66, 165, 245, 0.15);
}

.chain-cell.put-cell:hover {
    background: rgba(255, 167, 38, 0.15);
}

.chain-cell.itm {
    background: var(--bg-card);
}

.chain-cell.call-cell.itm:hover {
    background: rgba(66, 165, 245, 0.2);
}

.chain-cell.put-cell.itm:hover {
    background: rgba(255, 167, 38, 0.2);
}

.chain-cell.call-price,
.chain-cell.put-price {
    color: var(--text-primary);
    font-weight: 600;
}

.chain-strike {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 700;
    border-left: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}

.chain-strike.atm-strike {
    color: var(--accent);
    background: var(--accent-dim);
}

/* ===== JUDGMENT SECTION (4-Dimension) ===== */
.judgment-section {
    flex-shrink: 0;
    margin-top: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: 10px 14px;
}

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

.judgment-header h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.judgment-header h3 i {
    margin-right: 6px;
    color: var(--vega-color);
}

.dimension-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.dimension-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dimension-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.dim-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.dim-icon.dim-direction { background: var(--delta-color); }
.dim-icon.dim-volatility { background: var(--gamma-color); }
.dim-icon.dim-time { background: var(--theta-color); }
.dim-icon.dim-risk { background: var(--rho-color); }

.dimension-desc {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.7;
    min-height: 36px;
}

.dimension-desc .desc-kw {
    color: var(--accent);
    font-weight: 600;
}

.dimension-desc .desc-strategy {
    color: var(--vega-color);
    font-weight: 600;
}

.dimension-desc .desc-warn {
    color: var(--loss);
    font-weight: 700;
}

/* ===== AI RECOMMEND ===== */
.judgment-action {
    justify-content: flex-end;
}

.ai-recommend-result {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.recommend-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-dim);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}

.recommend-meta i {
    font-size: 15px;
}

.recommend-meta-label {
    font-weight: 700;
}

.recommend-meta-time {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 1px 8px;
}

.recommend-meta-tag {
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
    border-radius: 3px;
    padding: 2px 8px;
    margin-left: auto;
}

.recommend-cards {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.recommend-card {
    flex: 1;
    min-width: 160px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: 10px 12px;
    transition: var(--transition);
    cursor: pointer;
}

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

/* ===== AI FOUR-DIMENSION ADVICE ===== */
.judgment-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.four-dim-advice {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.recommend-meta-tag.four-dim-apply {
    cursor: pointer;
}

.recommend-meta-tag.four-dim-apply:hover {
    opacity: 0.85;
}

.four-dim-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.four-dim-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: 8px 10px;
}

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

.four-dim-chip-value {
    margin-left: auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.four-dim-reasoning {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: 8px 12px;
}

.recommend-card.active {
    border-color: var(--accent);
    background: var(--accent-dim);
}

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

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

.recommend-match {
    font-size: 10px;
    font-weight: 600;
    color: var(--profit);
    background: var(--profit-bg);
    padding: 1px 6px;
    border-radius: 3px;
}

.recommend-reason {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
}

/* ===== AI 思考过程 容器（含头部） ===== */
.ai-chat-section {
    flex-shrink: 0;
    margin-top: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    display: flex;
    flex-direction: column;
    height: 320px;
}

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

.chat-header h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.chat-header h3 i {
    margin-right: 6px;
    color: var(--accent);
}

/* ===== AI 思考过程 ===== */
.thinking-elapsed {
    font-size: 12px;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.thinking-stream {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    min-height: 0;
}

.thinking-steps {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.thinking-step {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    line-height: 1.6;
    word-break: break-word;
    animation: thinkingStepIn 0.25s ease;
}

.thinking-step i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 14px;
}

.thinking-step.active .thinking-step-text {
    color: var(--text-primary);
}

.thinking-step.active i {
    color: var(--accent);
}

.thinking-step.done .thinking-step-text {
    color: var(--text-secondary);
}

.thinking-step.done i {
    color: var(--success, #67c23a);
}

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

.thinking-reasoning {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-color);
}

.thinking-text {
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
}

.thinking-cursor {
    color: var(--accent);
    font-weight: 700;
    animation: thinkingCursorBlink 1s steps(1) infinite;
}

@keyframes thinkingCursorBlink {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}

/* ===== HEATMAP LAYOUT ===== */
.heatmap-layout {
    display: grid;
    grid-template-columns: 1fr 220px;
    height: 100%;
}

.heatmap-main {
    display: flex;
    flex-direction: column;
    padding: 12px;
    overflow: hidden;
}

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

.heatmap-sidebar {
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    padding: 12px;
    overflow-y: auto;
}

/* ===== PROBABILITY CARDS ===== */
.prob-card {
    margin-bottom: 12px;
}

.prob-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.prob-value {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.prob-value.profit { color: var(--profit); }
.prob-value.loss { color: var(--loss); }

.prob-bar {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

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

.prob-fill.profit { background: var(--profit); }
.prob-fill.loss { background: var(--loss); }

/* ===== RANGE DISPLAY ===== */
.range-display {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.range-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-size: 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
}

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

.range-value {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.range-value.highlight {
    color: var(--accent);
}

/* ===== SIGMA LEGEND ===== */
.sigma-legend {
    margin-top: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.legend-line {
    display: inline-block;
    width: 24px;
    height: 2px;
    border-radius: 1px;
}

.legend-line.sigma1 {
    background: rgba(255, 255, 255, 0.5);
    border-top: 1px dashed rgba(255, 255, 255, 0.5);
}

.legend-line.sigma2 {
    background: rgba(255, 255, 255, 0.25);
    border-top: 1px dashed rgba(255, 255, 255, 0.25);
}

/* ===== VOLATILITY LAYOUT ===== */
.volatility-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.vol-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.vol-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.control-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.control-item label {
    white-space: nowrap;
}

.control-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    min-width: 90px;
}

.vol-main {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.vol-info-overlay {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
}

.vol-info-card {
    background: rgba(17, 24, 32, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
    border-radius: var(--panel-radius);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 160px;
}

.vol-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

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

.vol-info-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--vega-color);
    font-variant-numeric: tabular-nums;
}

/* ===== HISTORICAL LAYOUT ===== */
.historical-layout {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hist-controls-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
}

.hist-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.greeks-toggles .el-checkbox {
    margin-right: 8px;
}

.hist-events-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.event-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
}

.event-tag.earnings {
    color: var(--vega-color);
    background: rgba(255, 238, 88, 0.12);
}

.event-tag.fomc {
    color: var(--delta-color);
    background: rgba(66, 165, 245, 0.12);
}

.event-tag.dividend {
    color: var(--profit);
    background: var(--profit-bg);
}

/* ===== ElementUI Dark Mode Overrides ===== */

/* Input */
.el-input__inner {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    font-size: 12px;
}

.el-input__inner:focus {
    border-color: var(--accent) !important;
}

.el-input__inner::placeholder {
    color: var(--text-muted) !important;
}

/* Input Number */
.el-input-number--mini {
    width: 100%;
}

.el-input-number .el-input__inner {
    text-align: center !important;
}

.el-input-number__decrease,
.el-input-number__increase {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

.el-input-number__decrease:hover,
.el-input-number__increase:hover {
    color: var(--accent) !important;
}

/* Select */
.el-select-dropdown {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.el-select-dropdown__item {
    color: var(--text-primary) !important;
    font-size: 12px;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
    background-color: var(--bg-hover) !important;
}

.el-select-dropdown__item.selected {
    color: var(--accent) !important;
    font-weight: 600;
}

.el-popper[x-placement^=bottom] .popper__arrow::after {
    border-bottom-color: var(--bg-secondary) !important;
}

.el-popper[x-placement^=bottom] .popper__arrow {
    border-bottom-color: var(--border-color) !important;
}

/* Radio Button Group */
.el-radio-button__inner {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
    font-size: 12px;
    padding: 7px 14px;
    box-shadow: none !important;
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: -1px 0 0 0 var(--accent) !important;
}

.el-radio-button__inner:hover {
    color: var(--text-primary) !important;
}

/* Slider */
.el-slider__runway {
    background-color: var(--bg-tertiary) !important;
    height: 4px;
}

.el-slider__bar {
    background-color: var(--accent) !important;
    height: 4px;
}

.el-slider__button {
    border-color: var(--accent) !important;
    background: var(--bg-primary) !important;
    width: 14px;
    height: 14px;
}

.el-slider__stop {
    background-color: var(--border-color) !important;
}

/* Checkbox */
.el-checkbox__label {
    color: var(--text-secondary) !important;
    font-size: 12px;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
    color: var(--text-primary) !important;
}

.el-checkbox__inner {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.delta-check .el-checkbox__input.is-checked .el-checkbox__inner { background-color: var(--delta-color) !important; border-color: var(--delta-color) !important; }
.gamma-check .el-checkbox__input.is-checked .el-checkbox__inner { background-color: var(--gamma-color) !important; border-color: var(--gamma-color) !important; }
.theta-check .el-checkbox__input.is-checked .el-checkbox__inner { background-color: var(--theta-color) !important; border-color: var(--theta-color) !important; }
.vega-check .el-checkbox__input.is-checked .el-checkbox__inner { background-color: var(--vega-color) !important; border-color: var(--vega-color) !important; }

/* Button */
.el-button--primary {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

.el-button--text {
    color: var(--text-secondary) !important;
}

.el-button--mini.is-circle {
    padding: 4px;
}

/* Date Picker */
.el-date-editor.el-input {
    width: 100% !important;
}

.el-picker-panel {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.el-date-table th {
    color: var(--text-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}

.el-date-table td.available:hover div {
    color: var(--accent) !important;
}

/* Tooltip */
.el-tooltip__popper.is-dark {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color);
}

/* Scrollbar in dropdowns */
.el-scrollbar__wrap {
    overflow-x: hidden;
}

.el-select-dropdown__wrap {
    max-height: 300px;
}

/* ===== FUNDAMENTAL CARDS ===== */
.fundamental-card {
    flex-shrink: 0;
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

.fundamental-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fundamental-toolbar .el-radio-button__inner {
    padding: 4px 8px;
    font-size: 11px;
}

.fundamental-loading,
.fundamental-empty {
    text-align: center;
    padding: 12px;
    color: var(--text-muted);
    font-size: 11px;
}

.fundamental-date {
    font-size: 10px;
    color: var(--text-muted);
    margin-bottom: 4px;
    text-align: right;
}

.fundamental-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.fundamental-table thead th {
    padding: 4px 6px;
    text-align: right;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 10px;
    border-bottom: 1px solid var(--border-color);
    background: transparent;
}

.fundamental-table thead th.col-field {
    text-align: left;
}

.fundamental-table tbody td {
    padding: 4px 6px;
    text-align: right;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.fundamental-table tbody td.col-field {
    text-align: left;
    color: var(--text-secondary);
    font-weight: 600;
}

.fundamental-table tbody tr:last-child td {
    border-bottom: none;
}

.financial-report-wrap .financial-section {
    margin-top: 8px;
}

.financial-report-wrap .financial-section:first-child {
    margin-top: 0;
}

.financial-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    padding: 4px 6px;
    margin-bottom: 2px;
    border-left: 3px solid var(--accent-color, #409eff);
    background: var(--bg-hover, rgba(64, 158, 255, 0.06));
}

/* ===== TECHNICAL INDICATORS CARD ===== */
.technical-indicator-card {
    flex-shrink: 0;
    padding: 8px 12px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

.tech-indicator-row {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}

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

.tech-indicator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.tech-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}


.tech-value {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

.tech-value small {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-muted);
}

.tech-value.overbought { color: var(--loss); }
.tech-value.oversold { color: var(--profit); }
.tech-value.neutral { color: var(--text-primary); }

.tech-value.golden_cross,
.tech-value.bullish { color: var(--profit); }
.tech-value.dead_cross,
.tech-value.bearish { color: var(--loss); }

.tech-value.touch_upper,
.tech-value.above_upper { color: var(--loss); }
.tech-value.touch_lower,
.tech-value.below_lower { color: var(--profit); }
.tech-value.inside { color: var(--text-primary); }

/* RSI progress bar */
.tech-bar-track {
    position: relative;
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: visible;
    margin: 4px 0;
}

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

.tech-bar-fill.rsi-bar.overbought { background: var(--loss); }
.tech-bar-fill.rsi-bar.oversold { background: var(--profit); }
.tech-bar-fill.rsi-bar.neutral { background: var(--accent); }

.rsi-zone-mark {
    position: absolute;
    top: -2px;
    width: 1px;
    height: 8px;
    background: var(--text-muted);
    opacity: 0.5;
}

/* Signal text */
.tech-signal {
    font-size: 10px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-top: 2px;
}

.tech-signal.signal-overbought,
.tech-signal.signal-dead_cross,
.tech-signal.signal-bearish,
.tech-signal.signal-above_upper { color: var(--loss); }

.tech-signal.signal-oversold,
.tech-signal.signal-golden_cross,
.tech-signal.signal-bullish,
.tech-signal.signal-below_lower { color: var(--profit); }

/* MACD & BB sub-values */
.tech-macd-values,
.tech-bb-values {
    display: flex;
    gap: 10px;
    font-size: 10px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    margin: 2px 0;
}

.trend-expanding {
    color: var(--vega-color);
    font-weight: 600;
}

/* Divergence tags */
.tech-divergence {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.divergence-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
    margin-right: 4px;
}

.divergence-tag.bearish {
    color: var(--loss);
    background: rgba(255, 82, 82, 0.12);
}

.divergence-tag.bullish {
    color: var(--profit);
    background: rgba(0, 230, 118, 0.12);
}

/* Squeeze tag */
.squeeze-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 2px;
    color: var(--vega-color);
    background: rgba(255, 238, 88, 0.12);
    margin-right: 4px;
    letter-spacing: 0.5px;
}

/* ATR strike levels */
.tech-atr-levels {
    margin-top: 3px;
}

.atr-level-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    padding: 2px 0;
}

.atr-level-label {
    color: var(--text-muted);
    min-width: 60px;
}

.atr-level-value {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.atr-level-value.vol-DANGER,
.tech-signal.vol-DANGER { color: var(--loss); }

/* OBV trend colors */
.tech-value.rising { color: var(--profit); }
.tech-value.falling { color: var(--loss); }
.tech-value.flat { color: var(--text-primary); }

.tech-signal.signal-obv-rising { color: var(--profit); }
.tech-signal.signal-obv-falling { color: var(--loss); }

/* CMF colors */
.tech-value.cmf-strong_buy { color: var(--profit); }
.tech-value.cmf-buy { color: var(--profit); opacity: 0.85; }
.tech-value.cmf-sell { color: var(--loss); opacity: 0.85; }
.tech-value.cmf-strong_sell { color: var(--loss); }
.tech-value.cmf-neutral { color: var(--text-primary); }

.tech-signal.signal-cmf-strong_buy,
.tech-signal.signal-cmf-buy { color: var(--profit); }
.tech-signal.signal-cmf-strong_sell,
.tech-signal.signal-cmf-sell { color: var(--loss); }

/* CMF bipolar bar (zero-axis at 50%) */
.cmf-zero-mark {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 1px;
    height: 8px;
    background: var(--text-muted);
    opacity: 0.7;
}

.tech-bar-fill.cmf-bar {
    position: absolute;
    top: 0;
}

.tech-bar-fill.cmf-bar.cmf-strong_buy { background: var(--profit); }
.tech-bar-fill.cmf-bar.cmf-buy { background: var(--profit); opacity: 0.7; }
.tech-bar-fill.cmf-bar.cmf-sell { background: var(--loss); opacity: 0.7; }
.tech-bar-fill.cmf-bar.cmf-strong_sell { background: var(--loss); }
.tech-bar-fill.cmf-bar.cmf-neutral { background: var(--accent); }

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .strategy-layout {
        grid-template-columns: 260px 1fr 200px;
    }
}

@media (max-width: 960px) {
    .view-container {
        overflow-y: auto;
    }
    .strategy-layout {
        grid-template-columns: 240px 1fr;
        grid-template-rows: 1fr auto;
        min-height: 660px;
    }
    .right-panel {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 1px solid var(--border-color);
        max-height: 240px;
    }
    .chain-right {
        display: none;
    }
    .chain-left {
        border-right: none;
    }
    .heatmap-layout {
        grid-template-columns: 1fr;
    }
    .heatmap-sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    .top-bar {
        flex-wrap: wrap;
        height: auto;
        padding: 8px 12px;
        gap: 8px;
    }
    .strategy-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        min-height: 900px;
    }
    .left-panel {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        max-height: 300px;
    }
    .right-panel {
        grid-column: 1;
        border-left: none;
        border-top: 1px solid var(--border-color);
        max-height: 240px;
    }
}