/* ===== K-Line Page Styles (Dark Theme) ===== */

/* ===== Page Wrapper ===== */
.kl-page {
    background: #f7f8fc;
    color: #e0e0e0;
    min-height: 100vh;
}

.kl-page .container {
    max-width: 1400px;
}

/* ===== Hero Banner Skeleton ===== */
.kl-page .product-hero.kl-hero-skeleton .container {
    position: relative;
    z-index: 2;
}

.kl-page .product-hero.kl-hero-skeleton::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    background: #f4f6fa;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

.kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .hero-content {
    height: 100%;
}

.kl-page .product-hero.kl-hero-skeleton.is-loading {
    background-color: #f4f6fa;
}

.kl-page .product-hero.kl-hero-skeleton.is-loading::before {
    opacity: 1;
}

.kl-page .product-hero.kl-hero-skeleton .banner-ripple {
    transition: opacity 0.22s ease;
}

.kl-page .product-hero.kl-hero-skeleton.is-loading .banner-ripple {
    opacity: 0;
}

.kl-page .product-hero.kl-hero-skeleton > .container > .hero-content {
    opacity: 1;
    transition: opacity 0.22s ease;
}

.kl-page .product-hero.kl-hero-skeleton.is-loading > .container > .hero-content {
    opacity: 0;
    pointer-events: none;
}

.kl-page .product-hero.kl-hero-skeleton.is-loading .kl-hero-skeleton-layer {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.22s ease;
}

.kl-page .product-hero.kl-hero-skeleton .kl-skeleton-block,
.kl-page .product-hero.kl-hero-skeleton .kl-skeleton-circle,
.kl-page .product-hero.kl-hero-skeleton .kl-skeleton-chart {
    background: linear-gradient(90deg, #edf1f7 25%, #e4eaf4 50%, #edf1f7 75%);
    background-size: 220% 100%;
    animation: kl-hero-skeleton-shimmer 1.4s ease-in-out infinite;
}

.kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .hero-title {
    width: 72%;
    height: 52px;
    border-radius: 10px;
    margin-top: 8px;
    color: transparent;
}

.kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .hero-subtitle {
    width: 58%;
    height: 24px;
    border-radius: 6px;
    color: transparent;
}

.kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .feature-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: transparent;
}

.kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .feature-text .feature-title {
    display: block;
    width: 72%;
    height: 16px;
    border-radius: 6px;
    color: transparent;
}

.kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .feature-text .feature-desc {
    display: block;
    width: 56%;
    height: 13px;
    border-radius: 6px;
    margin-top: 10px;
    color: transparent;
}

.kl-page .product-hero.kl-hero-skeleton .kl-skeleton-chart {
    border-radius: 10px;
}

.kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .hero-buttons .btn {
    width: 180px;
    height: 56px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    box-shadow: none;
    color: transparent;
}

.kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .hero-buttons .btn-outline {
    width: 170px;
}

.kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .banner-chart-card {
    box-shadow: 0 12px 32px rgba(26, 42, 80, 0.12);
}

.kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .chart-price .price-value {
    display: block;
    width: 130px;
    height: 18px;
    border-radius: 6px;
    color: transparent;
}

.kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .chart-price .price-change {
    display: block;
    width: 110px;
    height: 14px;
    border-radius: 6px;
    margin-top: 10px;
    color: transparent;
}

.kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .chart-tabs .tab {
    display: inline-block;
    width: 36px;
    height: 12px;
    padding: 0;
    line-height: 0;
    border-radius: 6px;
    color: transparent;
}

.kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .chart-tabs .tab + .tab {
    margin-left: 10px;
}

@keyframes kl-hero-skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

@media (max-width: 1080px) {
    .kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .hero-title {
        width: 78%;
        height: 6.5vw;
        min-height: 24px;
        margin: 0 auto 3vw;
    }

    .kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .hero-subtitle {
        width: 62%;
        height: 3.5vw;
        min-height: 14px;
        margin: 0 auto 5vw;
    }

    .kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .hero-buttons .btn {
        width: 30vw;
        height: 8.5vw;
        min-height: 34px;
    }

    .kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .chart-price .price-value {
        width: 22vw;
        height: 4vw;
        min-height: 16px;
    }

    .kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .chart-price .price-change {
        width: 18vw;
        height: 3vw;
        min-height: 12px;
    }

    .kl-page .product-hero.kl-hero-skeleton .kl-hero-skeleton-layer .chart-tabs .tab {
        width: 7vw;
        height: 2.2vw;
        min-height: 8px;
    }
}

/* ===== Section 1: Chart + Sidebar ===== */
.kl-chart-section {
    padding: 30px 0 40px;
}

.kl-chart-layout {
    display: flex;
    gap: 18px;
    align-items: stretch;
}

/* ===== Left: Main Chart Area ===== */
.kl-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Price Header */
.kl-price-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 30px 16px 26px;
    background: #FFFFFF;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kl-price-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.kl-symbol-name {
    font-size: 20px;
    font-weight: bold;
    color: #181818;
}

.kl-current-price {
    font-size: 20px;
    font-weight: bold;
    color: #20B531;
}

.kl-price-diff {
    margin-left: 6px;
}

.kl-price-diff,
.kl-price-pct {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    background: #EEEEEE;
    color: #666;
}

.kl-price-diff.up,
.kl-price-pct.up {
    background: rgba(32, 181, 49, 0.15);
    color: var(--color-bullish);
}

.kl-price-diff.down,
.kl-price-pct.down {
    background: #EEEEEE;
    color: var(--color-bearish);
}

.kl-price-extra {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    color: #666666;
}

.kl-price-extra span {
    white-space: nowrap;
}

/* Period Tabs */
.kl-period-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 30px 16px 26px;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kl-period-tabs {
    display: flex;
    gap: 8px;
}

.kl-period-tab {
    padding: 6px 14px;
    font-size: 13px;
    color: #888;
    background: transparent;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.kl-period-tab:hover {
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.06);
}

.kl-period-tab.active {
    color: #FFFFFF;
    background: #E13838;
}

/* Chart Type Toolbar */
.kl-chart-toolbar {
    display: flex;
    align-items: center;
    gap: 24px;
}

.kl-chart-types,
.kl-chart-tools {
    display: flex;
    gap: 2px;
}

.kl-chart-types {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    padding: 2px;
}

.kl-chart-type-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 13px;
    color: #888;
    background: transparent;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.kl-chart-type-btn:hover {
    color: #e0e0e0;
    background: rgba(255, 255, 255, 0.06);
}

.kl-chart-type-btn.active {
    color: #FFFFFF;
    background: #E13838;
}

.kl-chart-type-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ===== Fullscreen Mode ===== */
.kl-chart-container:fullscreen,
.kl-chart-container:-webkit-full-screen,
.kl-chart-container:-ms-fullscreen {
    background: #ffffff;
}
.kl-chart-container:fullscreen .kl-chart-inner,
.kl-chart-container:-webkit-full-screen .kl-chart-inner,
.kl-chart-container:-ms-fullscreen .kl-chart-inner {
    height: 100%;
}

/* ===== Fullscreen FAB ===== */
.kl-fs-fab {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 250;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: 1px solid #ddd;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18);
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}
.kl-fs-fab:hover {
    background: #fff;
    transform: scale(1.08);
}

/* 全屏时显示 FAB */
.kl-chart-container:fullscreen .kl-fs-fab,
.kl-chart-container:-webkit-full-screen .kl-fs-fab,
.kl-chart-container:-ms-fullscreen .kl-fs-fab {
    display: flex;
}

/* ===== Fullscreen Topbar ===== */
.kl-fs-topbar {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    overflow: hidden;
}

/* 全屏时允许 topbar 存在 */
.kl-chart-container:fullscreen .kl-fs-topbar,
.kl-chart-container:-webkit-full-screen .kl-fs-topbar,
.kl-chart-container:-ms-fullscreen .kl-fs-topbar {
    display: block;
}

/* topbar 展开 */
.kl-fs-topbar.open {
    transform: translateY(0);
}

/* topbar 内部元素微调 */
.kl-fs-topbar .kl-price-header {
    border-radius: 0;
    padding: 12px 16px 10px;
}
.kl-fs-topbar .kl-period-bar {
    padding: 10px 16px;
}

/* 全屏时设置/画图面板 z-index 提升，置于 topbar 之上 */
.kl-chart-container:fullscreen .kl-settings-panel,
.kl-chart-container:-webkit-full-screen .kl-settings-panel,
.kl-chart-container:-ms-fullscreen .kl-settings-panel,
.kl-chart-container:fullscreen .kl-draw-panel,
.kl-chart-container:-webkit-full-screen .kl-draw-panel,
.kl-chart-container:-ms-fullscreen .kl-draw-panel {
    z-index: 260;
}

/* ===== Fullscreen Topbar Mobile (class-based, survives fullscreen viewport expansion) ===== */
.kl-fs-mobile .kl-fs-fab {
    width: 44px;
    height: 44px;
    font-size: 20px;
    top: 8px;
    right: 8px;
}

.kl-fs-mobile .kl-fs-topbar .kl-price-header {
    padding: 2.5vw 3vw 2vw;
    gap: 2vw;
}

.kl-fs-mobile .kl-fs-topbar .kl-period-bar {
    padding: 2vw 3vw;
}

.kl-fs-mobile .kl-fs-topbar .kl-period-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    scrollbar-width: none;
}
.kl-fs-mobile .kl-fs-topbar .kl-period-tabs::-webkit-scrollbar { display: none; }

.kl-fs-mobile .kl-fs-topbar .kl-chart-toolbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    scrollbar-width: none;
}
.kl-fs-mobile .kl-fs-topbar .kl-chart-toolbar::-webkit-scrollbar { display: none; }

/* ===== Fullscreen Layout ===== */
.kl-chart-container.kl-fullscreen-active {
    padding: 0;
    overflow: hidden;
    display: flex;          /* 始终 flex-row，画图面板从左滑入 */
    flex-direction: row;
    align-items: stretch;
    transition: padding-top 0.3s ease; /* 与 topbar max-height 动画同步 */
}

/* topbar：position:absolute 覆盖顶部，paddingTop 让 flex 内容区下移 */
.kl-chart-container.kl-fullscreen-active .kl-fs-topbar {
    display: block;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    cursor: default;
}
.kl-chart-container.kl-fullscreen-active .kl-fs-topbar.open {
    max-height: 300px;
}
/* 移动端画图模式：topbar 高度与 Header 高度一致（由 JS 写入变量） */
.kl-chart-container.kl-fs-mobile.kl-mobile-draw-mode .kl-fs-topbar.open {
    max-height: var(--kl-mobile-topbar-height, 154px);
}

/* 全屏时隐藏旧 FAB，改用 pull-tab */
.kl-chart-container.kl-fullscreen-active .kl-fs-fab {
    display: none !important;
}

/* Pull-tab：拱形按钮，始终挂在 Header 正下方 */
.kl-fs-tab {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 201;
    top: 0;
    width: 52px;
    height: 20px;
    padding: 0 0 3px;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 52px 52px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
    font-size: 24px;
    color: #bbb;
    line-height: 1;
    align-items: flex-end;
    justify-content: center;
    transition: top 0.3s ease, color 0.15s;
    font-family: inherit;
}
.kl-fs-tab:hover { color: #666; }
.kl-chart-container.kl-fullscreen-active .kl-fs-tab {
    display: flex;
}

/* 设置面板置于 topbar 之上 */
.kl-chart-container.kl-fullscreen-active .kl-settings-panel {
    z-index: 260;
}

/* 画图面板：全屏时始终是 flex item，默认宽度 0，从左侧滑入/滑出 */
.kl-chart-container.kl-fullscreen-active .kl-draw-panel {
    display: block !important;  /* 覆盖 base display:none */
    position: static;
    order: -1;
    flex: 0 0 0;
    width: 0;
    overflow: hidden;
    border-radius: 0;
    border: none;
    transition: flex-basis 0.3s ease, width 0.3s ease;
}
/* 内容锁定 160px，不随面板宽度压缩；overflow:hidden 负责裁切（拉帘效果） */
.kl-chart-container.kl-fullscreen-active .kl-draw-panel > * {
    min-width: 160px;
    box-sizing: border-box;
}
.kl-chart-container.kl-fullscreen-active .kl-draw-panel.open {
    flex: 0 0 160px;
    width: 160px;
    overflow-y: auto;
    border-right: 1px solid #e5e5e5;
    box-shadow: 2px 0 8px rgba(0,0,0,0.08);
}

/* 图表区域：占满剩余空间 */
.kl-chart-container.kl-fullscreen-active #klMainChart {
    flex: 1 1 0;
    width: 0;
    height: auto;
    margin-left: 0 !important;
}

/* 侧边栏展开时：工具选项纵向列布局 */
.kl-chart-container.kl-fullscreen-active .kl-draw-panel.open .kl-draw-tools-grid {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.kl-chart-container.kl-fullscreen-active .kl-draw-panel.open .kl-draw-tool {
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kl-chart-container.kl-fullscreen-active .kl-draw-panel.open .kl-draw-actions {
    flex-direction: column;
}
.kl-chart-container.kl-fullscreen-active .kl-draw-panel.open .kl-draw-colors {
    flex-wrap: wrap;
    gap: 6px;
}

/* 选择按钮独立一行，全宽显示 */
.kl-draw-select-wrapper {
    grid-template-columns: 1fr;
    margin-bottom: 6px;
}

/* ===== Mobile Fullscreen Draw Mode (class-based, survives fullscreen viewport expansion) ===== */
/* 移动端全屏：隐藏左侧滑板 */
.kl-chart-container.kl-fs-mobile .kl-draw-panel {
    display: none !important;
    flex: none !important;
    width: 0 !important;
}

/* 移动端：画图面板被 JS 移入 topbar 后，显示为紧凑多行面板 */
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel {
    display: block !important;
    width: 100% !important;
    padding: 0;
    box-sizing: border-box;
    border-top: 1px solid #e5e5e5;
    /* 重置桌面端 flex-item 属性 */
    flex: 0 0 auto !important;
    position: static !important;
    order: unset !important;
}
.kl-chart-container.kl-fs-mobile.kl-mobile-draw-mode .kl-fs-topbar > .kl-draw-panel {
    max-height: var(--kl-mobile-topbar-height, 154px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.kl-chart-container.kl-fs-mobile.kl-mobile-draw-mode .kl-fs-topbar > .kl-draw-panel::-webkit-scrollbar {
    display: none;
}

/* 面板直接子元素解除 160px 最小宽约束 */
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel > * {
    min-width: unset !important;
}

/* header: 标题 + 关闭按钮横排 */
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    margin: 0;
    background: transparent;
    border-bottom: 1px solid #f0f0f0;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-settings-header span {
    font-size: 13px;
    font-weight: 600;
}

/* body: 自然纵向流式布局，紧凑间距 */
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-flip-btn {
    display: inline-flex;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-settings-body {
    display: block;
    padding: 6px 10px 8px;
}

/* 每个分类行：标签 + 可换行工具按钮 */
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-setting-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 6px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-setting-row:last-child {
    margin-bottom: 0;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-setting-row > label {
    font-size: 11px;
    color: #999;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 26px; /* 与按钮对齐 */
    min-width: 45px;
}

/* 工具按钮：可换行紧凑网格 */
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-tools-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-tool {
    padding: 4px 10px;
    font-size: 12px;
    white-space: nowrap;
    width: auto;
    text-align: center;
}

/* 选择按钮同行 */
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-header-select {
    padding: 3px 10px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-select-wrapper {
    grid-template-columns: unset;
    margin-bottom: 6px;
}

/* 提示文字在移动端隐藏 */
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-hint {
    display: none;
}

/* 防止“形态/颜色线型”首项被裁切 */
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-setting-row {
    min-width: 0;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-tools-grid,
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-inline-controls {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 1px 6px 1px 12px;
    box-sizing: border-box;
    scroll-padding-left: 6px;
}

/* 颜色：横排自动换行 */
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-colors {
    flex-wrap: wrap;
    gap: 6px;
}

/* 操作按钮横排 */
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-inline-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-inline-controls #klDrawStyles {
    flex: 1;
    min-width: 120px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-actions {
    flex-direction: row;
    gap: 6px;
    margin-top: 6px;
}

/* ===== Settings Panel ===== */
.kl-settings-panel {
    display: none;
    position: absolute;
    top: 12px;
    right: 16px;
    z-index: 90;
    width: 260px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.kl-settings-panel.open {
    display: block;
}
.kl-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}
.kl-settings-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
}
.kl-settings-close:hover { color: #333; }
.kl-draw-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.kl-draw-header-select {
    padding: 4px 10px;
    line-height: 1;
}
.kl-draw-flip-btn {
    display: none;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background: #fafafa;
    color: #666;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}
.kl-draw-flip-btn:hover {
    background: #f0f0f0;
    border-color: #cfcfcf;
}
.kl-settings-body {
    padding: 10px 14px 14px;
}
.kl-setting-row {
    margin-bottom: 12px;
}
.kl-setting-row:last-child { margin-bottom: 0; }
.kl-setting-row label {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 6px;
}
.kl-setting-options {
    display: flex;
    gap: 6px;
}
.kl-setting-opt {
    flex: 1;
    padding: 5px 0;
    font-size: 13px;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fafafa;
    color: #555;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.kl-setting-opt:hover {
    border-color: #ccc;
    background: #f0f0f0;
}
.kl-setting-opt.active {
    border-color: #E13838;
    color: #E13838;
    background: #FFF5F5;
    font-weight: 600;
}

/* Main Chart Container */
.kl-chart-container {
    background: #ffffff;
    height: 510px;
    position: relative;
    padding: 22px 26px 22px 26px;
    overflow: hidden;
}

.kl-chart-inner {
    width: 100%;
    height: 100%;
    position: relative;
}

.kl-chart-container .chart-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #444;
    font-size: 14px;
}

/* ===== Mobile OHLC Tap Bar ===== */
.kl-mobile-ohlc {
    display: none; /* JS 控制显示 */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: rgba(255, 255, 255, 0.93);
    border-top: 1px solid #e8e8e8;
    padding: 5px 12px;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    pointer-events: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.kl-mobile-ohlc .kl-ohlc-time {
    width: 100%;
    font-size: 11px;
    color: #999;
    line-height: 1;
    margin-bottom: 2px;
}
.kl-mobile-ohlc span {
    color: #555;
}
.kl-mobile-ohlc b {
    color: #222;
    font-weight: 600;
    margin-left: 2px;
}

/* Indicator Tabs */
#klIndicatorPanel {
    overflow: hidden;
    max-height: 600px;
    transition: max-height 0.3s ease;
}

#klIndicatorPanel.collapsed {
    max-height: 0;
}

.kl-indicator-bar {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background: #FFFFFF;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    gap: 20px;
}

.kl-indicator-tab {
    width: 60px;
    height: 30px;
    font-size: 12px;
    color: #888;
    background: transparent;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    ;
}

.kl-indicator-tab:hover {
    color: #e0e0e0;
    border-color: rgba(255, 255, 255, 0.25);
}

.kl-indicator-tab.active {
    color: #FFFFFF;
    background: #E13838;
}

/* Indicator Chart */
.kl-indicator-container {
    background: #FFFFFF;
    height: 510px;
    border-radius: 0 0 8px 8px;
    position: relative;
    padding: 22px 26px 22px 26px;
    overflow: hidden;
}

.kl-indicator-canvas {
    width: 100%;
    height: 100%;
}

.kl-indicator-legend {
    position: absolute;
    top: 26px;
    left: 34px;
    z-index: 2;
    font-size: 12px;
    color: #666666;
    background: rgba(255, 255, 255, 0.92);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #EEEEEE;
}

.kl-indicator-message {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    font-size: 14px;
    background: #F6F7F9;
    border: 1px dashed #DDDDDD;
}

.kl-indicator-container .chart-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #444;
    font-size: 14px;
    background: #EEEEEE;
}

/* ===== Right Sidebar ===== */
.kl-sidebar {
    width: 340px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sidebar Card Base */
.kl-card {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
}

.kl-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.kl-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #333333;
}

.kl-card-action {
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    font-family: inherit;
}

.kl-card-action:hover {
    color: #FFA200;
}

.kl-card-body {
    padding: 12px 16px;
}

/* ===== Market Depth Card ===== */
.kl-depth-table {
    width: 100%;
    border-collapse: collapse;
}

.kl-depth-table th {
    font-size: 12px;
    color: #999999;
    font-weight: 400;
    padding: 0 0 6px 0;
    text-align: right;
}

.kl-depth-table th:first-child,
.kl-depth-table td:first-child {
    text-align: left;
}

.kl-depth-table td {
    padding: 5px 0;
    font-size: 12px;
    text-align: right;
}

.kl-depth-table .ask-price {
    color: var(--color-bearish);
}

.kl-depth-table .bid-price {
    color: var(--color-bullish);
}

.kl-depth-table .depth-qty {
    color: #666666;
}

.kl-depth-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 4px 0;
}

/* ===== AI Analysis Card ===== */
.kl-ai-badge {
    display: inline-block;
    padding: 2px 10px;
    background: linear-gradient(to right, #1C32FF, #D273FF);
    border-radius: 12px;
    font-size: 12px;
    color: #FFFFFF;
    font-weight: 600;
}

.kl-ai-content {
    padding: 12px 16px;
    background: #F9F9F9;
    margin: 12px 16px 16px;
    border-radius: 8px;
}

.kl-ai-loading,
.kl-ai-empty {
    text-align: center;
    color: #999;
    font-size: 13px;
    padding: 20px 0;
}

/* 方向 + 置信度 头部行 */
.kl-ai-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #EEEEEE;
}

.kl-ai-direction {
    font-size: 16px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 4px;
}

.kl-ai-direction.bullish {
    color: #FFFFFF;
    background: #E53935;
}

.kl-ai-direction.bearish {
    color: #FFFFFF;
    background: #43A047;
}

.kl-ai-direction.neutral {
    color: #FFFFFF;
    background: #FF9800;
}

.kl-ai-confidence {
    font-size: 12px;
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 500;
}

.kl-ai-confidence.conf-high {
    background: #E8F5E9;
    color: #2E7D32;
}

.kl-ai-confidence.conf-mid {
    background: #FFF3E0;
    color: #E65100;
}

.kl-ai-confidence.conf-low {
    background: #FFEBEE;
    color: #C62828;
}

/* 各段落 */
.kl-ai-section {
    margin-bottom: 12px;
}

.kl-ai-section:last-child {
    margin-bottom: 0;
}

.kl-ai-label {
    font-size: 13px;
    color: #999999;
    font-weight: 600;
    padding: 0 0 6px;
    border-bottom: 1px dashed #E0E0E0;
    margin-bottom: 8px;
}

/* 关键价位网格 */
.kl-ai-prices {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kl-ai-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.kl-ai-price-row .price-label {
    font-size: 12px;
    color: #888;
    min-width: 56px;
}

.kl-ai-price-row .price-value {
    font-size: 14px;
    font-weight: 700;
    font-family: 'SF Mono', 'Menlo', monospace;
    min-width: 64px;
    text-align: right;
    margin-right: 16px;
}

.kl-ai-price-row .price-value.resistance {
    color: #E53935;
}

.kl-ai-price-row .price-value.support {
    color: #43A047;
}

/* 研判与建议文本 */
.kl-ai-text {
    font-size: 13px;
    color: #444444;
    line-height: 1.7;
    white-space: pre-line;
}

.kl-ai-forecast-item {
    margin-bottom: 6px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.kl-ai-forecast-item:last-child {
    margin-bottom: 0;
}

.kl-ai-advice-item {
    padding: 8px;
    background: #FAFAFA;
    border-radius: 6px;
}

.kl-ai-advice-item:last-child {
    margin-bottom: 0;
}

.forecast-tag,
.advice-tag {
    display: inline-block;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

.forecast-tag {
    background: #E3F2FD;
    color: #1565C0;
}

.advice-tag.short {
    background: #FFF8E1;
    color: #F57F17;
}

.advice-tag.medium {
    background: #F3E5F5;
    color: #7B1FA2;
}

.kl-ai-advice-item .advice-tag {
    margin-right: 6px;
    vertical-align: middle;
}

/* 操作建议结构化 */
.advice-dir {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}

.advice-dir.bullish {
    background: #FFEBEE;
    color: #E53935;
}

.advice-dir.bearish {
    background: #E8F5E9;
    color: #43A047;
}

.advice-dir.neutral {
    background: #FFF3E0;
    color: #E65100;
}

.advice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px 6px;
    padding: 6px 0 2px;
    text-align: center;
}

.advice-key {
    font-size: 12px;
    color: #888;
    line-height: 1.8;
}

.advice-num {
    font-weight: 700;
    font-size: 13px;
    font-family: 'SF Mono', 'Menlo', monospace;
    color: #333;
    line-height: 1.8;
}

.advice-num.stop {
    color: #E53935;
}

.advice-num.target {
    color: #43A047;
}

.advice-kv {
    padding: 4px 0 2px;
}

.advice-note {
    font-size: 12px;
    color: #666;
    line-height: 1.5;
    margin-top: 2px;
}

.advice-line {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    padding-left: 4px;
}

/* 风险提示 */
.kl-ai-risk {
    margin-top: 10px;
    padding: 8px 10px;
    background: #FFF8E1;
    border-left: 3px solid #FFA000;
    border-radius: 0 4px 4px 0;
    font-size: 12px;
    color: #E65100;
    line-height: 1.5;
}

.kl-ai-risk .risk-icon {
    color: #FFA000;
    margin-right: 4px;
}

/* ===== Market Sentiment Card (gauge-section base + dark overrides) ===== */
.kl-sentiment-gauge {
    padding: 23px 18px 22px;
}

/* Base gauge styles (from index.css, needed since kline doesn't load index.css) */
.kl-page .gauge-section {
    text-align: center;
}

.kl-page .market-sentiment {
    margin-top: 12px;
}

.kl-page .gauge-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.kl-page .gauge-container svg {
    overflow: visible;
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
}

.kl-page .gauge-text {
    font-size: 14px;
    font-weight: 500;
    fill: #888;
}

.kl-page .gauge-needle-img {
    --needle-gap: 8px;
    /* 调这个值控制针与弧段的间距 */
    position: absolute;
    bottom: calc(11.11% + var(--needle-gap));
    left: calc(50% - 27.5px);
    width: 55px;
    height: auto;
    transform-origin: center calc(100% + var(--needle-gap));
    transform: rotate(0deg);
    transition: transform 0.5s ease-out;
}

.kl-page .gauge-label-main {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: #1a6b3c;
    display: inline-block;
    padding: 4px 18px;
    border-radius: 14px;
    margin-top: 2px;
}

/* Sentiment Stats (看跌 / 中性 / 看涨) */
.kl-sentiment-stats {
    display: flex;
    justify-content: space-between;
    padding: 14px 24px 16px;
}

.kl-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.kl-stat-value {
    font-size: 24px;
    font-weight: 700;
}

.kl-stat-value.kl-stat-sell {
    color: var(--color-bearish);
}

.kl-stat-value.kl-stat-neutral {
    color: #888;
}

.kl-stat-value.kl-stat-buy {
    color: var(--color-bullish);
}

.kl-stat-item .kl-stat-label {
    font-size: 14px;
    color: #999999;
}

/* Buy / Sell Buttons (standalone div) */
.kl-action-btns {
    display: flex;
    gap: 12px;
}

.kl-btn-buy,
.kl-btn-sell {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    text-align: center;
}

.kl-btn-buy {
    background: var(--color-bullish);
    color: #fff;
}

.kl-btn-buy:hover {
    background: #1a9e2a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(32, 181, 49, 0.3);
}

.kl-btn-sell {
    background: var(--color-bearish);
    color: #fff;
}

.kl-btn-sell:hover {
    background: #d93b37;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(240, 73, 69, 0.3);
}

/* ===== Comments Card ===== */
.kl-comment-tabs {
    display: flex;
    gap: 20px;
    padding: 12px 16px 0;
    position: relative;
}

.kl-comment-tabs::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 0;
    border-bottom: 0.5px solid #EEEEEE;
}

.kl-comment-tab {
    padding: 10px 0;
    font-size: 14px;
    color: #666666;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    position: relative;
}

.kl-comment-tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    border-bottom: 2px solid transparent;
}

.kl-comment-tab:hover {
    color: #e0e0e0;
}

.kl-comment-tab.active {
    color: #E13838;
}

.kl-comment-tab.active::after {
    border-bottom-color: #E13838;
}

.kl-comment-list {
    padding: 12px 16px;
    max-height: 300px;
    overflow-y: auto;
}

.kl-comment-item {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.kl-comment-item:last-child {
    border-bottom: none;
}

.kl-comment-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #EEEEEE;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.kl-comment-avatar.analyst {
    background: #1565C0;
}
.kl-comment-avatar.user {
    background: #F57C00;
}

.kl-comment-body {
    flex: 1;
    min-width: 0;
}

.kl-comment-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.kl-comment-name {
    font-size: 14px;
    font-weight: 600;
    color: #666666;
}

.kl-comment-time {
    font-size: 10px;
    color: #999999;
}

.kl-comment-text {
    font-size: 12px;
    color: #666666;
    line-height: 1.6;
}

/* Custom Scrollbar for comments */
.kl-comment-list::-webkit-scrollbar {
    width: 4px;
}

.kl-comment-list::-webkit-scrollbar-track {
    background: transparent;
}

.kl-comment-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

/* Sentiment Tags */
.kl-comment-sentiment {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-top: 4px;
}

.kl-comment-sentiment.bullish {
    color: #00b894;
    background: rgba(0, 184, 148, 0.1);
}

.kl-comment-sentiment.bearish {
    color: #e13838;
    background: rgba(225, 56, 56, 0.1);
}

.kl-comment-sentiment.neutral {
    color: #999;
    background: rgba(153, 153, 153, 0.1);
}

/* ===== News Article List Card ===== */
.kl-news-article-list {
    padding: 8px 16px;
}

.kl-news-article-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.kl-news-article-item:last-child {
    border-bottom: none;
}

.kl-news-thumb {
    width: 70px;
    height: 50px;
    overflow: hidden;
    flex-shrink: 0;
    display: block;
}

.kl-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kl-news-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.kl-news-title {
    font-size: 14px;
    font-weight: 500;
    color: #666666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s;
}

.kl-news-title:hover {
    color: #DC0000;
}

.kl-news-meta {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 10px;
    color: #999999;
}

.kl-news-meta span {
    position: relative;
}

.kl-news-meta span:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background: rgba(255, 255, 255, 0.1);
}

.kl-news-empty {
    padding: 30px 0;
    text-align: center;
    color: #555;
    font-size: 13px;
}

/* ===== Article Area (inside left column) ===== */
.kl-article-wrapper {
    margin-top: 16px;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 40px 48px;
}

.kl-article-title {
    font-size: 20px;
    font-weight: 700;
    color: #181818;
    margin-bottom: 44px;
}

.kl-article-body h3 {
    font-size: 16px;
    font-weight: 600;
    color: #E13838;
    margin: 28px 0 14px;
}

.kl-article-body h3:first-child {
    margin-top: 0;
}

.kl-article-body p {
    font-size: 14px;
    color: #666666;
    line-height: 1.8;
    margin-bottom: 12px;
}

.kl-article-body ul {
    margin: 8px 0 16px;
    padding-left: 20px;
}

.kl-article-body ul li {
    font-size: 14px;
    color: #666666;
    line-height: 1.8;
    margin-bottom: 4px;
    list-style: disc;
}

.kl-article-body ul li::marker {
    color: #DC0000;
}

/* Tags */
.kl-tags-section {
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.kl-tags-title {
    font-size: 16px;
    font-weight: 600;
    color: #E13838;
    margin-bottom: 22px;
}

.kl-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kl-tag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid #EEEEEE;
    border-radius: 4px;
    font-size: 14px;
    color: #666666;
    transition: all 0.2s;
}

.kl-tag:hover {
    border-color: #DC0000;
    color: #DC0000;
    background: rgba(220, 0, 0, 0.08);
}

/* ===== Ticker Bar ===== */
.kl-ticker-bar {
    background: #FFFFFF;
}

.kl-ticker-list {
    display: flex;
    align-items: center;
    height: 100px;
    gap: 40px;
    padding: 20px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.kl-ticker-list::-webkit-scrollbar {
    display: none;
}

.kl-ticker-item {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 5px;
    background: #FFFFFF;
    border: 1px solid #F4F4F4;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1 0 180px;
}

.kl-ticker-item:hover,
.kl-ticker-item.active {
    background: rgba(255, 177, 175, .05);
    border-color: #FFB1AF;
}

.kl-ticker-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kl-ticker-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kl-ticker-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.kl-ticker-name {
    font-size: 10px;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kl-ticker-name em {
    font-style: normal;
    font-size: 10px;
    color: #333333;
    margin-left: 4px;
}

.kl-ticker-price {
    font-size: 16px;
    font-weight: bold;
    color: #20B531;
    white-space: nowrap;
}

.kl-ticker-change {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex-shrink: 0;
}

.kl-ticker-diff,
.kl-ticker-pct {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.kl-ticker-item.up .kl-ticker-diff,
.kl-ticker-item.up .kl-ticker-pct {
    color: var(--color-bullish);
}

.kl-ticker-item.down .kl-ticker-diff,
.kl-ticker-item.down .kl-ticker-pct {
    color: var(--color-bearish);
}

/* ===== Responsive ===== */
@media (max-width: 1080px) {
    .kl-ticker-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .kl-ticker-list {
        height: auto;
        padding: 3vw 0;
        gap: 2vw;
        min-width: max-content;
    }

    .kl-ticker-item {
        flex: 0 0 auto;
        padding: 2.5vw 3vw;
        gap: 2.5vw;
        border-radius: 2vw;
    }

    .kl-ticker-icon {
        width: 8vw;
        height: 8vw;
    }

    .kl-ticker-name {
        font-size: 2.6vw;
    }

    .kl-ticker-price {
        font-size: 3.8vw;
    }

    .kl-ticker-diff,
    .kl-ticker-pct {
        font-size: 2.6vw;
    }
}

@media (max-width: 1080px) {
    .kl-chart-section {
        padding: 3vw 0 0;
    }

    .kl-chart-layout {
        flex-direction: column;
        gap: 3vw;
    }

    .kl-main {
        width: 100%;
    }

    .kl-sidebar {
        width: 100%;
        gap: 3vw;
    }

    /* Price Header */
    .kl-price-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 2vw;
        padding: 3vw;
    }

    .kl-price-info {
        flex-wrap: wrap;
        gap: 2vw;
    }

    .kl-symbol-name {
        font-size: 4vw;
    }

    .kl-current-price {
        font-size: 6vw;
    }

    .kl-price-change {
        font-size: 3vw;
    }

    .kl-price-extra {
        gap: 3vw;
        font-size: 2.8vw;
        flex-wrap: wrap;
    }

    /* Period Tabs */
    .kl-period-bar {
        flex-direction: column;
        gap: 2vw;
        padding: 2vw 3vw;
        align-items: flex-start;
    }

    .kl-period-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    .kl-period-tab {
        font-size: 3vw;
        padding: 1.5vw 3vw;
        white-space: nowrap;
    }

    .kl-chart-toolbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }

    .kl-chart-type-btn {
        font-size: 3vw;
        padding: 1.5vw 2.5vw;
        white-space: nowrap;
    }

    /* 移动端隐藏画图按钮 */
    .kl-chart-type-btn[data-type="draw"] {
        display: none;
    }

    /* Chart */
    .kl-chart-container {
        height: 60vw;
    }

    /* Indicator */
    .kl-indicator-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 2vw 3vw;
    }

    .kl-indicator-tab {
        font-size: 3vw;
        padding: 1.5vw 3.5vw;
        white-space: nowrap;
    }

    .kl-indicator-container {
        height: 55vw;
    }

    /* Cards */
    .kl-card-header {
        padding: 3vw;
    }

    .kl-card-title {
        font-size: 3.5vw;
    }

    .kl-card-body {
        padding: 3vw;
    }

    /* Article */
    .kl-article-wrapper {
        padding: 5vw 4vw;
        border-radius: 2vw;
    }

    .kl-article-title {
        font-size: 5vw;
        margin-bottom: 5vw;
    }

    .kl-article-body h3 {
        font-size: 4vw;
        margin: 5vw 0 3vw;
    }

    .kl-article-body p {
        font-size: 3.2vw;
    }

    .kl-article-body ul li {
        font-size: 3.2vw;
    }

    .kl-tags-list {
        gap: 2vw;
    }

    .kl-tag {
        font-size: 3vw;
        padding: 1.5vw 3.5vw;
    }

    /* Hero Banner */
    .kl-hero {
        padding: 4vw 3vw;
    }

    .kl-hero .banner-chart-card {
        height: 40vw;
    }

    /* Market Depth */
    .kl-depth-table th {
        font-size: 2.8vw;
        padding: 1.5vw 0;
    }

    .kl-depth-table td {
        font-size: 2.8vw;
        padding: 1.2vw 0;
    }

    /* AI Analysis */
    .kl-ai-badge {
        font-size: 2.6vw;
        padding: 0.5vw 2vw;
    }

    .kl-ai-content {
        padding: 2.5vw 3vw;
        margin: 2.5vw 3vw 3vw;
    }

    .kl-ai-header-row {
        margin-bottom: 2.5vw;
        padding-bottom: 2vw;
    }

    .kl-ai-direction {
        font-size: 3.5vw;
        padding: 0.8vw 3vw;
    }

    .kl-ai-confidence {
        font-size: 2.6vw;
    }

    .kl-ai-section {
        margin-bottom: 2.5vw;
    }

    .kl-ai-label {
        font-size: 2.8vw;
        padding: 0 0 1.5vw;
        margin-bottom: 1.5vw;
    }

    .kl-ai-price-row .price-label {
        font-size: 2.6vw;
        min-width: 12vw;
    }

    .kl-ai-price-row .price-value {
        font-size: 3vw;
        min-width: 14vw;
        text-align: right;
        margin-right: 3vw;
    }

    .kl-ai-text {
        font-size: 2.8vw;
        line-height: 1.6;
    }

    .forecast-tag,
    .advice-tag {
        font-size: 2.4vw;
        padding: 0.3vw 1.5vw;
    }

    .advice-dir {
        font-size: 2.6vw;
        padding: 0.4vw 1.5vw;
    }

    .advice-grid {
        gap: 0.5vw 2vw;
    }

    .advice-key {
        font-size: 2.6vw;
    }

    .advice-num {
        font-size: 2.8vw;
    }

    .advice-note {
        font-size: 2.6vw;
    }

    .advice-line {
        font-size: 2.8vw;
    }

    .kl-ai-risk {
        font-size: 2.6vw;
        padding: 2vw 2.5vw;
        margin-top: 2vw;
    }

    /* Sentiment Gauge */
    .kl-sentiment-gauge {
        padding: 4vw 3vw;
    }

    .kl-page .gauge-container svg {
        max-width: 55vw;
    }

    .kl-page .gauge-text {
        font-size: 2.6vw;
    }

    .kl-page .gauge-needle-img {
        width: 10vw;
        left: calc(50% - 5vw);
    }

    .kl-page .gauge-label-main {
        font-size: 3vw;
        padding: 1vw 3vw;
    }

    .kl-sentiment-stats {
        padding: 3vw 4vw;
    }

    .kl-stat-value {
        font-size: 5vw;
    }

    .kl-stat-item .kl-stat-label {
        font-size: 3vw;
    }

    .kl-action-btns {
        gap: 2.5vw;
        padding: 0 3vw 3vw;
    }

    .kl-btn-buy,
    .kl-btn-sell {
        padding: 2.5vw;
        font-size: 3.2vw;
        border-radius: 2vw;
    }

    /* Comments */
    .kl-comment-tabs {
        gap: 4vw;
        padding: 2.5vw 3vw 0;
    }

    .kl-comment-tab {
        font-size: 3vw;
        padding: 2vw 0;
    }

    .kl-comment-list {
        padding: 2.5vw 3vw;
        max-height: 50vw;
    }

    .kl-comment-item {
        gap: 2vw;
        padding: 2vw 0;
    }

    .kl-comment-avatar {
        width: 7vw;
        height: 7vw;
        font-size: 3vw;
    }

    .kl-comment-name {
        font-size: 3vw;
    }

    .kl-comment-time {
        font-size: 2.4vw;
    }

    .kl-comment-text {
        font-size: 2.8vw;
    }

    .kl-comment-empty {
        font-size: 3vw;
        padding: 5vw 0;
    }

    /* News */
    .kl-news-article-list {
        padding: 1.5vw 3vw;
    }

    .kl-news-article-item {
        gap: 2.5vw;
        padding: 2.5vw 0;
    }

    .kl-news-thumb {
        width: 16vw;
        height: 11vw;
    }

    .kl-news-title {
        font-size: 3vw;
    }

    .kl-news-meta {
        margin-top: 2vw;
        font-size: 2.4vw;
    }

    .kl-news-empty {
        padding: 5vw 0;
        font-size: 3vw;
    }

    /* Indicator Legend & Message */
    .kl-indicator-legend {
        top: 2.5vw;
        left: 4vw;
        font-size: 2.6vw;
        padding: 0.6vw 1.6vw;
    }

    .kl-indicator-message {
        font-size: 3vw;
        border-radius: 2vw;
    }

    /* Settings Panel */
    .kl-settings-panel {
        width: auto;
        left: 3vw;
        right: 3vw;
        top: auto;
        bottom: 3vw;
        border-radius: 3vw;
    }
    .kl-settings-header {
        padding: 3vw 4vw;
        font-size: 3.5vw;
    }
    .kl-settings-close {
        font-size: 5.5vw;
    }
    .kl-settings-body {
        padding: 2.5vw 4vw 4vw;
    }
    .kl-setting-row {
        margin-bottom: 3vw;
    }
    .kl-setting-row label {
        font-size: 3vw;
        margin-bottom: 1.5vw;
    }
    .kl-setting-opt {
        padding: 2vw 0;
        font-size: 3.2vw;
        border-radius: 1.5vw;
    }
}

/* ========== Draw Panel ========== */
.kl-draw-panel {
    display: none;
    position: absolute;
    top: 12px;
    left: 16px;
    z-index: 90;
    width: 254px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}
.kl-draw-panel.open {
    display: block;
}
.kl-draw-colors {
    display: flex;
    gap: 8px;
    align-items: center;
}
.kl-draw-inline-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.kl-draw-inline-controls #klDrawStyles {
    display: flex;
    gap: 6px;
    min-width: 120px;
}
.kl-draw-inline-controls #klDrawStyles .kl-setting-opt {
    flex: 1;
    min-width: 40px;
}
.kl-draw-color {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
    flex-shrink: 0;
}
.kl-draw-color:hover {
    transform: scale(1.2);
}
.kl-draw-color.active {
    border-color: #333;
    transform: scale(1.2);
}
.kl-draw-hint {
    font-size: 12px;
    color: #aaa;
    margin: 0 0 10px;
    line-height: 1.5;
}
.kl-draw-clear-btn {
    width: 100%;
    padding: 7px 0;
    background: #fff5f5;
    border: 1px solid #ffc5c5;
    border-radius: 4px;
    color: #E13838;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}
.kl-draw-clear-btn:hover {
    background: #ffe0e0;
}
/* 工具按钮网格 */
.kl-draw-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}
.kl-draw-tool {
    padding: 5px 4px;
    font-size: 12px;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    background: #fafafa;
    color: #555;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kl-draw-tool:hover {
    border-color: #ccc;
    background: #f0f0f0;
}
.kl-draw-tool.active {
    border-color: #1a56e8;
    color: #1a56e8;
    background: #eef3ff;
    font-weight: 600;
}
/* 选择/移动按钮（在工具体中，样式继承自 kl-draw-tool） */
/* 操作行（撤销 + 清除） */
.kl-draw-actions {
    display: flex;
    gap: 6px;
}
.kl-draw-undo-btn {
    flex: 1;
    padding: 7px 0;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #555;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}
.kl-draw-undo-btn:hover { background: #e8e8e8; }
.kl-draw-clear-btn { flex: 1; }

/* ===== Mobile Extra ===== */
@media (max-width: 1080px) {
    /* kl-price-extra 在极小屏上折行 */
    .kl-price-extra {
        flex-wrap: wrap;
    }
}

/* ===== Mobile Draw Toolbar Tidy Override ===== */
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-settings-header {
    padding: 4px 8px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-settings-header span {
    font-size: 13px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-header-actions {
    gap: 8px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-header-select,
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-flip-btn {
    height: 24px;
    padding: 0 9px;
    font-size: 12px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-settings-body {
    padding: 4px 8px 6px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-setting-row {
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-setting-row > label {
    flex: 0 0 62px;
    min-width: 62px;
    line-height: 24px;
    font-size: 11.5px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-tools-grid,
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-inline-controls {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-tools-grid::-webkit-scrollbar,
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-inline-controls::-webkit-scrollbar {
    display: none;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-tool {
    flex: 0 0 auto;
    padding: 4px 9px;
    font-size: 12px;
    border-radius: 5px;
    touch-action: manipulation;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-colors {
    flex-wrap: nowrap;
    gap: 6px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-color {
    width: 20px;
    height: 20px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-inline-controls #klDrawStyles {
    flex: 0 0 auto;
    min-width: auto;
    gap: 5px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-inline-controls #klDrawStyles .kl-setting-opt {
    flex: 0 0 auto;
    min-width: 42px;
    padding: 4px 8px;
    font-size: 12px;
}
.kl-chart-container.kl-fs-mobile .kl-fs-topbar > .kl-draw-panel .kl-draw-hint {
    display: none;
}

/* 移动端隐藏滚动条（保留滑动功能） */
@media (max-width: 1080px) {
    * { scrollbar-width: none; -ms-overflow-style: none; }
    *::-webkit-scrollbar { display: none; }
}