/**
 * Roadmap #2 — split chart overlay (1x2 / 2x2 multi-chart layout).
 * Loaded only when js/vip-chart-terminal-split.js is enqueued, kept in its
 * own file to keep vip-chart-terminal.css below the 8600-line maintainability
 * budget (see scripts/check-maintainability.php).
 */
.td-vip-split-overlay {
    position: fixed;
    inset: 0;
    /* App shell itself uses a very high z-index; split must sit above it. */
    z-index: 2147483647 !important;
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.td-vip-split-overlay.is-hidden { display: none; }
.td-vip-split-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(17, 24, 39, 0.94);
    color: #f8fafc;
    border-bottom: 1px solid rgba(148, 163, 184, 0.32);
}
.td-vip-split-toolbar-title { font-weight: 600; letter-spacing: 0.02em; }
.td-vip-split-toolbar-modes { display: inline-flex; gap: 4px; padding: 2px; background: rgba(255,255,255,0.08); border-radius: 6px; }
.td-vip-split-mode-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    font: inherit;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.td-vip-split-mode-btn:hover { color: #fff; background: rgba(255,255,255,0.06); }
.td-vip-split-mode-btn.is-active { background: #2962ff; color: #fff; }
.td-vip-split-toolbar-spacer { flex: 1 1 auto; }
.td-vip-split-close {
    appearance: none;
    border: 1px solid rgba(248, 113, 113, 0.6);
    background: rgba(248, 113, 113, 0.18);
    color: #fee2e2;
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    font: inherit;
    transition: background-color 0.12s ease;
}
.td-vip-split-close:hover { background: rgba(248, 113, 113, 0.36); }
.td-vip-split-grid {
    flex: 1 1 auto;
    display: grid;
    gap: 8px;
    padding: 8px;
    min-height: 0;
}
.td-vip-split-grid.is-1x2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}
.td-vip-split-grid.is-2x2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.td-vip-split-grid.is-1x3 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}
.td-vip-split-grid.is-3x1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}
.td-vip-split-grid.is-2x3 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.td-vip-split-toolbar-sync {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 12px;
}
.td-vip-split-toolbar-sync label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.td-vip-split-toolbar-sync input[type="checkbox"] {
    accent-color: #2962ff;
    margin: 0;
}
.td-vip-split-cell {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 6px;
    overflow: hidden;
    min-width: 0;
    min-height: 0;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18);
}
.td-vip-split-cell-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.94);
}
.td-vip-split-cell-symbol,
.td-vip-split-cell-tf {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 4px;
    padding: 2px 6px;
    background: #fff;
    color: #1f2937;
    font: 12px/1.4 inherit;
    cursor: pointer;
}
.td-vip-split-cell-symbol { min-width: 110px; }
.td-vip-split-cell-tf { min-width: 60px; }
.td-vip-split-cell-status {
    font-size: 11px;
    color: #64748b;
    flex: 1 1 auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.td-vip-split-cell-status.is-error { color: #b91c1c; }
.td-vip-split-cell-refresh {
    appearance: none;
    border: 1px solid rgba(148, 163, 184, 0.4);
    background: #fff;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #2962ff;
    font-size: 14px;
    transition: background-color 0.12s ease;
}
.td-vip-split-cell-refresh:hover { background: rgba(41, 98, 255, 0.08); }
.td-vip-split-cell-canvas { flex: 1 1 auto; min-height: 0; }
@media (max-width: 760px) {
    .td-vip-split-grid.is-2x2 {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
    }
    .td-vip-split-grid.is-1x2 {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }
}
/* 历史：旧版本曾用 `.td-vip-page { pointer-events: none }` 试图阻止主图
   resize 抖动，但 pointer-events 并不影响 ResizeObserver，反而把整页面
   （含顶部 toolbar）冻成"看得见点不动" → 在某些主题下 overlay 又被压到
   下层 → 用户无法关闭，呈现"卡死"现象。已删除。
   主图被 overlay 全屏覆盖时鼠标本就够不到，不需要再额外屏蔽。 */

/* Topbar split toggle button. */
.td-vip-split-toggle {
    appearance: none;
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    height: var(--td-vip-topbar-control-height, 30px);
    min-height: var(--td-vip-topbar-control-height, 30px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--td-vip-topbar-text, #3f4d5e);
    border-radius: 6px;
    padding: 0 8px;
    cursor: pointer;
    font: 600 12px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 7px;
    white-space: nowrap;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.td-vip-split-toggle::before {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    width: 1px;
    height: 16px;
    background: var(--td-vip-topbar-divider, rgba(148, 163, 184, 0.18));
    transform: translateY(-50%);
    pointer-events: none;
}
.td-vip-split-toggle span:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    color: var(--td-vip-topbar-text-strong, #111827);
    font-size: 0;
    line-height: 1;
    opacity: 0.86;
    transform: translateY(-0.5px);
}
.td-vip-split-toggle span:first-child::before,
.td-vip-split-toggle span:first-child::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 1px;
    opacity: 0.9;
}
.td-vip-split-toggle span:first-child::before {
    top: 2px;
    bottom: 2px;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
}
.td-vip-split-toggle span:first-child::after {
    left: 2px;
    right: 2px;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
}
.td-vip-split-toggle span:last-child {
    line-height: 1;
}
.td-vip-split-toggle:hover,
.td-vip-split-toggle:focus-visible {
    background: var(--td-vip-topbar-hover, #f7f9fc);
    color: var(--td-vip-topbar-text-strong, #111827);
    outline: none;
}
.td-vip-split-toggle.is-active {
    background: var(--td-vip-topbar-active, #f3f6f9);
    color: var(--td-vip-topbar-text-strong, #111827);
    border-color: var(--td-vip-topbar-active-border, #dde4ec);
    box-shadow: inset 0 0 0 1px var(--td-vip-topbar-active-border, #dde4ec);
}
body.td-vip-body.is-night-mode .td-vip-split-toggle {
    color: var(--td-vip-topbar-text, #d1dae5);
}

/* Roadmap #3: 价格刻度模式自定义 dropdown。
 * 历史：原生 <select> 在某些堆叠上下文/主题里点击后 popup 不显示
 * （疑似被图表区或主题层覆盖），改为按钮 + 浮层实现，顶层 z-index 兜底。 */
.td-vip-price-scale-mode {
    position: relative; /* 给 popover absolute 定位的锚点 */
    z-index: 2147483647;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    flex: 0 0 auto;
    gap: 5px;
    margin-left: 8px;
    padding: 0 3px 0 10px;
    height: var(--td-vip-topbar-control-height, 30px);
    border-radius: 6px;
    background: transparent;
    overflow: visible;
    /* 创建独立 stacking context，避免被祖先 transform 影响子元素 z-index */
    isolation: isolate;
}
.td-vip-price-scale-mode::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 16px;
    background: var(--td-vip-topbar-divider, rgba(148, 163, 184, 0.18));
    transform: translateY(-50%);
    pointer-events: none;
}
.td-vip-price-scale-mode-label {
    font-size: 11px;
    color: var(--td-vip-topbar-muted, #97a6b7);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}
.td-vip-price-scale-mode-select {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 60px;
    border: 1px solid var(--td-vip-topbar-segment-border, #e5ebf2);
    background: var(--td-vip-topbar-segment-bg, #fbfcfe);
    color: var(--td-vip-topbar-text-strong, #111827);
    border-radius: 6px;
    padding: 0 7px;
    height: 26px;
    font: 600 12px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.td-vip-price-scale-mode-select:hover {
    border-color: var(--td-vip-topbar-active-border, #dde4ec);
    background: var(--td-vip-topbar-hover, #f7f9fc);
}
.td-vip-price-scale-mode-select:focus-visible {
    outline: none;
    border-color: var(--td-vip-topbar-active-border, #dde4ec);
    box-shadow: inset 0 0 0 1px var(--td-vip-topbar-active-border, #dde4ec);
}
.td-vip-price-scale-mode-select[aria-expanded="true"] {
    border-color: var(--td-vip-topbar-active-border, #dde4ec);
    background: var(--td-vip-topbar-active, #f3f6f9);
    box-shadow: inset 0 0 0 1px var(--td-vip-topbar-active-border, #dde4ec);
}
.td-vip-price-scale-mode-text {
    font-size: 12px;
    line-height: 1;
}
.td-vip-price-scale-mode-caret {
    font-size: 10px;
    color: var(--td-vip-topbar-muted, #97a6b7);
    transition: transform 0.12s ease;
}
.td-vip-price-scale-mode-select[aria-expanded="true"] .td-vip-price-scale-mode-caret {
    transform: rotate(180deg);
    color: var(--td-vip-topbar-text-strong, #111827);
}
.td-vip-price-scale-mode-menu {
    position: absolute;
    /* 锚定到容器底部，向下展开 */
    top: calc(100% + 4px);
    right: 0;
    z-index: 2147483647 !important; /* 高于图表区、左右 rail，确保不被任何主题层遮挡 */
    min-width: 220px;
    max-width: calc(100vw - 16px);
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 8px;
    box-shadow:
        0 14px 36px -16px rgba(15, 23, 42, 0.32),
        0 4px 12px -6px rgba(15, 23, 42, 0.18);
}
.td-vip-price-scale-mode-menu.is-floating {
    position: fixed;
    top: auto;
    right: auto;
    z-index: 2147483647 !important;
}
.td-vip-price-scale-mode-menu.is-hidden { display: none; }
.td-vip-price-scale-mode-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: #1f2937;
    transition: background-color 0.1s ease;
}
.td-vip-price-scale-mode-item:hover,
.td-vip-price-scale-mode-item:focus-visible {
    background: #f0f4ff;
    outline: none;
}
.td-vip-price-scale-mode-item.is-active {
    background: rgba(41, 98, 255, 0.08);
    color: #1d4ed8;
}
.td-vip-price-scale-mode-item.is-active::before {
    content: "✓";
    float: right;
    color: #2962ff;
    font-weight: 700;
}
.td-vip-price-scale-mode-item-name {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}
.td-vip-price-scale-mode-item-hint {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.3;
}
.td-vip-price-scale-mode-item.is-active .td-vip-price-scale-mode-item-hint {
    color: #4b5fd6;
}
body.td-vip-body.is-night-mode .td-vip-price-scale-mode-label {
    color: var(--td-vip-topbar-muted, #718197);
}
body.td-vip-body.is-night-mode .td-vip-price-scale-mode-select {
    background: var(--td-vip-topbar-segment-bg, #0f172a);
    color: var(--td-vip-topbar-text-strong, #f8fafc);
    border-color: var(--td-vip-topbar-segment-border, #334155);
}
body.td-vip-body.is-night-mode .td-vip-price-scale-mode-select:hover {
    background: var(--td-vip-topbar-hover, #101827);
}
body.td-vip-body.is-night-mode .td-vip-price-scale-mode-select[aria-expanded="true"] {
    background: var(--td-vip-topbar-active, #111b29);
    color: var(--td-vip-topbar-text-strong, #f8fafc);
}
body.td-vip-body.is-night-mode .td-vip-price-scale-mode-menu {
    background: #111827;
    border-color: rgba(75, 85, 99, 0.7);
    box-shadow:
        0 14px 36px -16px rgba(0, 0, 0, 0.7),
        0 4px 12px -6px rgba(0, 0, 0, 0.5);
}
body.td-vip-body.is-night-mode .td-vip-price-scale-mode-item {
    color: #e5e7eb;
}
body.td-vip-body.is-night-mode .td-vip-price-scale-mode-item:hover,
body.td-vip-body.is-night-mode .td-vip-price-scale-mode-item:focus-visible {
    background: rgba(41, 98, 255, 0.18);
}
body.td-vip-body.is-night-mode .td-vip-price-scale-mode-item.is-active {
    background: rgba(41, 98, 255, 0.28);
    color: #dbeafe;
}
body.td-vip-body.is-night-mode .td-vip-price-scale-mode-item-hint {
    color: #94a3b8;
}