/* ===== MCB Divergence View ===== */

/* ---- Dark theme tokens (default) ---- */
:root {
    /* Surface */
    --bg:            #131722;
    --surface:       #1e222d;
    --surface-hover: #252932;
    --border:        #2a2e39;

    /* Text */
    --text:          #d1d4dc;
    --text-muted:    #787b86;

    /* Accent (TradingView blue) */
    --accent:        #2962ff;
    --accent-text:   #ffffff;

    /* Tf-badge */
    --tf-bg:         #2962ff;
    --tf-text:       #ffffff;

    /* Section card */
    --card-bg:       #1e222d;
    --card-border:   #2a2e39;
    --card-shadow:   0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
    --card-shadow-hover: 0 4px 12px rgba(0,0,0,.45);

    /* Header */
    --header-bg:     #131722;
    --header-border: #2a2e39;
    --header-text:   #d1d4dc;

    /* Controls */
    --pill-bg:       rgba(30,34,45,.9);
    --pill-border:   rgba(255,255,255,.08);
    --pill-text:     #d1d4dc;
    --pill-hover-bg: rgba(41, 98, 255,.80);
    --countdown-color: #fbbf24;

    /* Error */
    --err-bg:        rgba(255,82,82,.12);
    --err-border:    rgba(255,82,82,.30);
    --err-text:      #ff5252;

    /* Legend */
    --legend-bg:     #1e222d;
    --legend-border: #2a2e39;

    /* Loading placeholder */
    --loading-bg:    #131722;
    --loading-text:  #787b86;

    /* Radius */
    --r-sm:   6px;
    --r-md:   10px;
    --r-pill: 999px;

    /* Space */
    --s1: 4px;  --s2: 8px;  --s3: 12px;
    --s4: 16px; --s6: 24px; --s8: 32px;
}

/* ---- Light theme tokens ---- */
[data-theme="light"] {
    /* Surface */
    --bg:            #f0f3fa;
    --surface:       #ffffff;
    --surface-hover: #f7f8fc;
    --border:        #d6dae6;

    /* Text */
    --text:          #1a1d23;
    --text-muted:    #6b7280;

    /* Accent */
    --accent:        #1d56e8;
    --accent-text:   #ffffff;

    /* Tf-badge */
    --tf-bg:         #1d56e8;
    --tf-text:       #ffffff;

    /* Section card */
    --card-bg:       #ffffff;
    --card-border:   #d6dae6;
    --card-shadow:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --card-shadow-hover: 0 4px 12px rgba(0,0,0,.10);

    /* Header */
    --header-bg:     #ffffff;
    --header-border: #d6dae6;
    --header-text:   #1a1d23;

    /* Controls */
    --pill-bg:       rgba(255,255,255,.92);
    --pill-border:   rgba(0,0,0,.10);
    --pill-text:     #1a1d23;
    --pill-hover-bg: rgba(29, 86, 232,.88);
    --countdown-color: #d97706;

    /* Error */
    --err-bg:        #fee2e2;
    --err-border:    #fca5a5;
    --err-text:      #991b1b;

    /* Legend */
    --legend-bg:     #ffffff;
    --legend-border: #d6dae6;

    /* Loading placeholder */
    --loading-bg:    #f5f6fa;
    --loading-text:  #9ca3af;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background .2s, color .2s;
}

.container {
    /* 满宽铺满浏览器，两侧不留大片空白；只留 6px 让卡片不贴边 */
    max-width: none;
    margin: 0;
    padding: 0 6px;
}

/* ---- Header ---- */
.header-section {
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    color: var(--header-text);
    padding: var(--s6) 0;
    margin-bottom: var(--s6);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s4);
    flex-wrap: wrap;
}

.header-title {
    display: flex;
    align-items: center;
    gap: var(--s3);
}

.header-title h1 {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.2px;
    margin: 0;
    color: var(--header-text);
}

.header-title .subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin: 2px 0 0;
    letter-spacing: .2px;
}

/* ---- Theme toggle button ---- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
    user-select: none;
    white-space: nowrap;
}

.theme-toggle:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
    color: var(--accent);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-toggle svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform .3s ease;
}

/* ---- Fixed pill (auto-refresh) ---- */
.auto-refresh-indicator {
    position: fixed;
    bottom: var(--s4);
    right: var(--s4);
    top: auto;
    background: var(--pill-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--pill-border);
    color: var(--pill-text);
    padding: var(--s2) var(--s4);
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,.20);
    transition: background .15s;
    user-select: none;
    cursor: pointer;
}

.auto-refresh-indicator:hover { background: var(--pill-hover-bg); color: #fff; }

.auto-refresh-indicator:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

#refreshCountdown {
    color: var(--countdown-color);
    font-variant-numeric: tabular-nums;
}

/* ---- Error bar ---- */
.error-bar {
    background: var(--err-bg);
    color: var(--err-text);
    border: 1px solid var(--err-border);
    border-radius: var(--r-md);
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s4);
    font-size: 13px;
}

/* ---- 图表网格：每行两个周期 ---- */
.mcb-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 6px;
}

/* ---- Section card ---- */
.mcb-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--r-md);
    box-shadow: var(--card-shadow);
    padding: var(--s3) var(--s4) 0;
    margin-bottom: 0;                 /* 间距交给 .mcb-grid 的 gap */
    min-width: 0;                     /* 防止 grid 子项被内容撑破 */
    transition: box-shadow .2s, background .2s, border-color .2s;
}

.mcb-section:hover { box-shadow: var(--card-shadow-hover); }

/* ---- Section header ---- */
.mcb-section-header {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s3);
}

.tf-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--tf-bg);
    color: var(--tf-text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    min-width: 44px;
}

.mcb-section-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}

.mcb-updated {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- Chart canvas ---- */
.mcb-chart {
    width: 100%;
    height: 520px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    overflow: hidden;
}

.mcb-chart-loading {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--loading-bg);
    color: var(--loading-text);
    font-size: 13px;
    border-radius: var(--r-sm);
}

/* ---- Legend ---- */
.mcb-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    align-items: center;
    background: var(--legend-bg);
    border: 1px solid var(--legend-border);
    border-radius: var(--r-md);
    box-shadow: var(--card-shadow);
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s8);
    font-size: 12px;
    color: var(--text);
    transition: background .2s, border-color .2s;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1180px) {
    .mcb-grid { grid-template-columns: 1fr; }
    .mcb-chart { height: 560px; }
}

@media (max-width: 768px) {
    .container { padding: 0 6px; }
    .header-inner { flex-direction: column; align-items: flex-start; gap: var(--s3); }
    .mcb-chart { height: 460px; }
    .mcb-updated { display: none; }
    .auto-refresh-indicator {
        bottom: var(--s2); right: var(--s2);
        font-size: 11px; padding: var(--s1) var(--s3);
    }
}

@media (prefers-reduced-motion: reduce) {
    body, .mcb-section, .theme-toggle, .auto-refresh-indicator { transition: none; }
    .theme-toggle svg { transition: none; }
}

/* ---- 警告态提示条（数据滞后 / 回退直连）---- */
.error-bar.warn {
    background: rgba(251, 191, 36, .12);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, .35);
}