/* ===== 独立 K 线系统（专业统计软件细节版） ===== */
.kline-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    background: rgba(0, 0, 0, 0.78);
    padding: 6px;
    box-sizing: border-box;
}
.kline-overlay.show { display: flex; }

.kline-shell {
    width: min(1600px, 100%);
    height: min(98vh, 100%);
    margin: auto;
    display: flex;
    flex-direction: column;
    background: #041c14;
    border: 1px solid #1a4d38;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 18px 56px rgba(0, 0, 0, 0.65);
    color: #e4f5ec;
    font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
}

.kline-statusbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    padding: 4px 10px;
    background: #083528;
    border-bottom: 1px solid #1f5a42;
    font-size: 12px;
    color: #c8e8d8;
}
.kline-statusbar b { color: #ffe08a; font-weight: 700; }
.kline-statusbar .kline-draw-balls {
    display: inline-flex;
    gap: 3px;
}
.kline-statusbar .kline-draw-balls i {
    display: inline-flex;
    width: 17px;
    height: 17px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #cbe56d;
    color: #102c2a;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
}
.kline-statusbar-right {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.kline-ctrl {
    display: grid;
    grid-template-columns: 148px 1fr 118px;
    gap: 6px 8px;
    padding: 6px 8px;
    background: linear-gradient(180deg, #1b6349 0%, #0e3c2c 100%);
    border-bottom: 1px solid #246649;
    font-size: 12px;
}
.kline-left-rail {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 4px;
    min-width: 0;
}
.kline-star-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.kline-star-btn {
    border: 1px solid #2f7a5a;
    background: #134836;
    color: #d7ebe2;
    border-radius: 2px;
    padding: 4px 0;
    font-size: 12px;
    cursor: pointer;
}
.kline-star-btn.active {
    background: #e85d04;
    border-color: #ff8c42;
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.kline-scope-list {
    max-height: 118px;
    overflow: auto;
    border: 1px solid #2a5f48;
    background: #0a241a;
    border-radius: 2px;
    padding: 2px;
}
.kline-scope-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    color: #c8e8d8;
    font-size: 11px;
    cursor: pointer;
    border-radius: 2px;
}
.kline-scope-item.active {
    background: #1e4fbf;
    color: #fff;
}
.kline-scope-item input { margin: 0; }
.kline-ctrl-main {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}
.kline-cat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.kline-cat-btn {
    border: 1px solid #2f6b50;
    background: #123628;
    color: #bfe6d3;
    border-radius: 2px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
}
.kline-cat-btn.active {
    background: #0d4d4a;
    border-color: #cbe56d;
    color: #cbe56d;
    font-weight: 700;
}
.kline-ctrl-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 8px;
}

.kline-cat-detail:empty { display: none; }
.kline-cat-panel {
    background: #0a281c;
    border: 1px solid #2f6b50;
    border-radius: 3px;
    padding: 4px 6px 4px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.kline-cat-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.kline-cat-lab {
    color: #ff6b6b;
    font-weight: 700;
    min-width: 34px;
    text-align: right;
}
.kline-cat-digs {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
}
.kline-cat-dig {
    border: 1px solid #bfd4c8;
    background: #f4faf6;
    color: #16352a;
    border-radius: 2px;
    height: 22px;
    min-width: 24px;
    padding: 0 4px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 700;
    font-family: Consolas, monospace;
}
.kline-cat-dig:hover { background: #dff2e5; }
.kline-cat-dig.active {
    background: #e53935;
    border-color: #ff6b6b;
    color: #fff;
}
.kline-cat-dig.is-dan.active { background: #e53935; border-color: #ff8a80; color: #fff; }
.kline-cat-dig.is-tuo.active { background: #ffb703; border-color: #ffd166; color: #102c2a; }
.kline-cat-dig.is-pei.active { background: #2f6bff; border-color: #6fa2ff; color: #fff; }
.kline-cat-clear {
    border: 1px solid #2f6b50;
    background: #134836;
    color: #dff7eb;
    border-radius: 2px;
    height: 22px;
    padding: 0 8px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 4px;
}
.kline-cat-clear:hover { background: #1a5c45; }
.kline-cat-radio {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #d7ebe2;
    font-size: 12px;
    cursor: pointer;
}
.kline-cat-radio input {
    accent-color: #2f6bff;
    margin: 0;
}
.kline-cat-check {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #d7ebe2;
    font-size: 12px;
    cursor: pointer;
    margin-left: auto;
}
.kline-cat-check input { margin: 0; accent-color: #cbe56d; }
.kline-cat-input {
    background: #0b241a;
    border: 1px solid #2f6b50;
    color: #e8fff4;
    border-radius: 2px;
    padding: 2px 6px;
    font-size: 12px;
    width: 120px;
}
.kline-lab {
    color: #9fd9c0;
    font-size: 11px;
}
.kline-ctrl-row label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #c7ebda;
    white-space: nowrap;
}
.kline-ctrl-row input[type="number"],
.kline-ctrl-row input[type="text"],
.kline-ctrl-row select,
.kline-rand-wrap input {
    background: #0b241a;
    border: 1px solid #2f6b50;
    color: #e8fff4;
    border-radius: 2px;
    padding: 2px 5px;
    font-size: 12px;
    width: 70px;
}
.kline-rand-wrap input { width: 42px; }
.kline-pos-group,
.kline-digits,
.kline-quick,
.kline-style-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    align-items: center;
}
.kline-pos-btn,
.kline-digit,
.kline-quick button,
.kline-style-group button,
.kline-btn-lite {
    border: 1px solid #2f6b50;
    background: #0d2b1f;
    color: #d7ebe2;
    border-radius: 2px;
    height: 22px;
    min-width: 22px;
    padding: 0 6px;
    font-size: 12px;
    cursor: pointer;
}
.kline-digit { width: 22px; padding: 0; }
.kline-pos-btn.active {
    background: #cbe56d;
    border-color: #cbe56d;
    color: #102c2a;
    font-weight: 700;
}
.kline-digit.active {
    background: #e53935;
    border-color: #ff6b6b;
    color: #fff;
    font-weight: 700;
}
.kline-style-group button:hover,
.kline-quick button:hover,
.kline-btn-lite:hover { background: #1a4d38; }
.kline-theory-hint {
    color: #ffe08a;
    font-size: 11px;
}
.kline-ctrl-side {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 110px;
}
.kline-side-act {
    border: 1px solid #d7e8df;
    background: #f4faf6;
    color: #16352a;
    border-radius: 2px;
    padding: 5px 6px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
}
.kline-side-act:hover { background: #fff; }
.kline-side-act.is-export {
    border-color: #5eb8ff;
    box-shadow: 0 0 0 1px rgba(94, 184, 255, 0.55);
    font-weight: 700;
}
.kline-btn {
    border: 1px solid #2f7a5a;
    background: #134836;
    color: #dff7eb;
    border-radius: 3px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.kline-btn:hover { background: #1a5c45; }
.kline-btn.is-primary {
    background: #cbe56d;
    border-color: #cbe56d;
    color: #102c2a;
    font-weight: 700;
}
.kline-btn.is-close {
    background: transparent;
    border-color: #4a6b5d;
    color: #b8d6c8;
}
.kline-pane-switch {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
}
.kline-pane-switch button {
    border: 1px solid #2f6b50;
    background: #0d2b1f;
    color: #bfe6d3;
    border-radius: 2px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
}
.kline-pane-switch button.active {
    background: #2f6bff;
    border-color: #2f6bff;
    color: #fff;
    font-weight: 700;
}
.kline-layout-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
}
.kline-layout-switch .kline-lab {
    margin-right: 2px;
    color: #8fc4ad;
    font-size: 11px;
}
.kline-layout-switch button {
    border: 1px solid #2f6b50;
    background: #0d2b1f;
    color: #bfe6d3;
    border-radius: 2px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
}
.kline-layout-switch button.active {
    background: #1e7a52;
    border-color: #2f9b6a;
    color: #fff;
    font-weight: 700;
}

.kline-body {
    flex: 1;
    min-height: 0;
    display: grid;
    gap: 3px;
    background: #020e0a;
    padding: 3px;
}
.kline-body.is-layout-1 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.kline-body.is-layout-2 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}
.kline-body.is-layout-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}
.kline-body.is-layout-4 .kline-panel {
    grid-template-columns: 22px 1fr;
}
.kline-body.is-layout-4 .kline-side-tab {
    font-size: 10px;
    padding: 4px 0;
}
.kline-body.is-layout-4 .kline-toolbar {
    flex-wrap: wrap;
}

.kline-panel {
    min-height: 0;
    display: grid;
    grid-template-columns: 28px 1fr;
    border: 1px solid #1c4634;
    background: #000;
    overflow: hidden;
}
.kline-panel.is-active {
    border-color: #3d9b72;
    box-shadow: inset 0 0 0 1px rgba(61, 155, 114, 0.35);
}
.kline-side-tabs {
    display: flex;
    flex-direction: column;
    background: #0a1f16;
    border-right: 1px solid #1c4634;
}
.kline-side-tab {
    writing-mode: vertical-rl;
    text-orientation: upright;
    border: 0;
    border-bottom: 1px solid #1c4634;
    background: transparent;
    color: #8fc4ad;
    font-size: 12px;
    letter-spacing: 0.15em;
    padding: 10px 4px;
    cursor: pointer;
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.05;
}
.kline-side-tab:hover { background: #123628; color: #e8fff4; }
.kline-side-tab.active {
    background: #164f3d;
    color: #ff6b8a;
    font-weight: 700;
}

.kline-chart-col {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.kline-chart-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    background: #000;
}
.kline-chart-wrap canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
}
.kline-title-line {
    position: absolute;
    left: 38px;
    top: 4px;
    z-index: 2;
    font-size: 12px;
    color: #f5fff9;
    text-shadow: 0 1px 2px rgba(0,0,0,0.85);
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 48px);
}
.kline-title-line b { color: #ffe08a; }
.kline-axis-tag {
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    font-size: 11px;
    color: #ff6b8a;
    letter-spacing: 0.15em;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
}

.kline-float-tip {
    position: absolute;
    z-index: 5;
    display: none;
    padding: 5px 8px;
    background: rgba(8, 28, 20, 0.92);
    border: 1px solid #3d9b72;
    border-radius: 3px;
    color: #e8fff4;
    font-size: 11px;
    font-family: Consolas, monospace;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.kline-float-tip.show { display: block; }

.kline-cross-v,
.kline-cross-h {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    display: none;
}
.kline-cross-v {
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px dashed rgba(203, 229, 109, 0.55);
}
.kline-cross-h {
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed rgba(203, 229, 109, 0.35);
}
.kline-chart-wrap.is-hovering .kline-cross-v,
.kline-chart-wrap.is-hovering .kline-cross-h { display: block; }

.kline-toolbar {
    display: flex;
    align-items: center;
    gap: 1px;
    flex-wrap: wrap;
    padding: 2px 6px;
    background: #0a1f16;
    border-top: 1px solid #1c4634;
}
.kline-ind-btn {
    border: 0;
    background: transparent;
    color: #d8c35a;
    font-size: 11px;
    padding: 2px 6px;
    cursor: pointer;
    border-radius: 2px;
}
.kline-ind-btn:hover { background: rgba(216, 195, 90, 0.12); }
.kline-ind-btn.active {
    color: #ff5a5a;
    font-weight: 700;
    background: rgba(255, 90, 90, 0.14);
}
.kline-toolbar-spacer { flex: 1; }
.kline-toolbar .kline-tip {
    font-size: 11px;
    color: #7fa894;
}
.kline-tools {
    display: inline-flex;
    gap: 2px;
}
.kline-tools button {
    width: 22px;
    height: 18px;
    border: 1px solid #2f6b50;
    background: #0d2b1f;
    color: #bfe6d3;
    border-radius: 2px;
    font-size: 10px;
    cursor: pointer;
    padding: 0;
}
.kline-period-presets {
    display: inline-flex;
    gap: 2px;
    flex-wrap: wrap;
}
.kline-period-btn {
    border: 1px solid #2f6b50;
    background: #0d2b1f;
    color: #bfe6d3;
    border-radius: 2px;
    padding: 2px 7px;
    font-size: 11px;
    cursor: pointer;
}
.kline-period-btn:hover { background: #1a4d38; }
.kline-period-btn.active {
    background: #cbe56d;
    border-color: #cbe56d;
    color: #102c2a;
    font-weight: 700;
}
.kline-chart-wrap canvas { touch-action: none; }

.kline-entry-btn {
    border: 1px solid rgba(255,255,255,0.28);
    background: rgba(203, 229, 109, 0.95);
    color: #102c2a;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.kline-entry-btn:hover { filter: brightness(1.05); }
.kline-entry-hint {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    margin-right: 6px;
}

/* 网页数据分析库隐藏 K 线系统入口与浮层；桌面客户端不受影响 */
body[data-client-section="stats"] .kline-entry-btn,
body[data-client-section="stats"] .kline-entry-hint,
body[data-client-section="stats"] .kline-overlay,
body.lab-features-theme[data-client-section="stats"] .kline-entry-btn,
body.lab-features-theme[data-client-section="stats"] .kline-entry-hint,
body.lab-features-theme[data-client-section="stats"] .kline-overlay {
    display: none !important;
}
body.lab-features-theme[data-client-section="stats"] #statsTable .combo-cell[data-kline-hint]::after {
    content: none;
    display: none;
}

@media (max-width: 900px) {
    .kline-overlay { padding: 0; }
    .kline-shell { width: 100%; height: 100%; border-radius: 0; }
    .kline-ctrl { grid-template-columns: 1fr; }
    .kline-star-col { flex-direction: row; }
    .kline-star-btn { padding: 3px 8px; }
    .kline-body.is-layout-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .kline-body.is-layout-2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
    .kline-body.is-layout-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
}
