/* 
 * TradingView-style Mobile & Tablet CSS
 * 移动端和平板端专用样式
 * Version: 1.0.0
 */

/* ================================
   基于JavaScript的设备控制样式
   ================================ */

/* 移动端水印样式调整 */
@media (max-width: 768px) {
    .chart-watermark .watermark-line1 {
        font-size: 32px !important;
        margin-bottom: 8px !important;
    }

    .chart-watermark .watermark-line2 {
        font-size: 24px !important;
    }
}

/* 小屏幕设备进一步调整 */
@media (max-width: 480px) {
    .chart-watermark .watermark-line1 {
        font-size: 24px !important;
        margin-bottom: 6px !important;
    }

    .chart-watermark .watermark-line2 {
        font-size: 18px !important;
    }
}

/* 平板设备例外规则：覆盖768px媒体查询，显示桌面端登录按钮 */
body.tablet-device .left-toolbar-column .user-avatar {
    display: flex !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

body.tablet-device .hamburger-menu-btn {
    display: none !important;
}

body.tablet-device .mobile-bottom-toolbar {
    display: none !important;
}

/* 绘图工具弹出菜单样式 */
.drawing-tools-popup-container {
    position: relative;
    display: inline-block;
}

.drawing-tools-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(10px);
    transition: all 0.2s ease;
}

.drawing-tools-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.drawing-tools-row {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.drawing-tools-row:last-child {
    margin-bottom: 0;
}

.popup-tool-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #ffffff;
    padding: 6px 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 44px;
    max-height: 44px;
    box-sizing: border-box;
}

/* 鼠标工具弹出菜单中的按钮 - 强制水平平分空间 */
.mouse-tools-popup .popup-tool-btn {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    max-width: none !important;
    /* ✨ 确保按钮水平排列不换行 */
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* 绘图工具弹出菜单中的按钮 - 网格布局中等宽 */
.drawing-tools-row .popup-tool-btn {
    flex: 1;
}

.popup-tool-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.popup-tool-btn:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.15);
}

.popup-tool-btn.active {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
}

.popup-tool-label {
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    margin-top: 1px;
    margin-bottom: 1px;
    /* 确保文本不换行，保持一致性 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 确保所有按钮中的SVG图标大小一致 */
.popup-tool-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* 绘图工具弹出菜单空白占位 */
.popup-tool-placeholder {
    flex: 1;
    min-height: 44px;
    visibility: hidden;
    /* 确保占位符与按钮完全对齐 */
    border-radius: 6px;
    padding: 8px 4px;
}

/* 鼠标工具弹出菜单样式 */
.mouse-tools-popup-container {
    position: relative;
    display: inline-block;
}

.mouse-tools-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
    min-width: 120px;
    /* ✨ 强化左右布局样式 - 最高优先级 */
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(10px);
    transition: all 0.2s ease;
}

.mouse-tools-popup.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ✨ 最高优先级：强制鼠标工具弹出菜单水平布局 */
html body .mouse-tools-popup,
html body #mouse-tools-popup {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
}

html body .mouse-tools-popup .popup-tool-btn,
html body #mouse-tools-popup .popup-tool-btn {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    max-width: none !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* 鼠标工具弹出菜单箭头 */
.mouse-tools-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(30, 30, 30, 0.95);
}

/* 鼠标工具弹出菜单主题切换支持 */
.theme-light .mouse-tools-popup {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.theme-light .mouse-tools-popup::after {
    border-top-color: rgba(255, 255, 255, 0.95) !important;
}

/* 确保鼠标工具弹出菜单中的按钮也支持主题切换 */
.theme-light .mouse-tools-popup .popup-tool-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #2a2e39 !important;
}

.theme-light .mouse-tools-popup .popup-tool-btn:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

.theme-light .mouse-tools-popup .popup-tool-btn:active {
    background: rgba(0, 0, 0, 0.15) !important;
}

.theme-light .mouse-tools-popup .popup-tool-btn.active {
    background: rgba(41, 98, 255, 0.15) !important;
    border-color: rgba(41, 98, 255, 0.3) !important;
    color: #2962ff !important;
}

.theme-light .mouse-tools-popup .popup-tool-label {
    color: #2a2e39 !important;
}

/* 绘图工具弹出菜单箭头 */
.drawing-tools-popup::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(30, 30, 30, 0.95);
}

/* ================================
   绘图工具弹出菜单主题切换支持
   ================================ */

/* 白天模式绘图工具弹出菜单 */
.theme-light .drawing-tools-popup {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.theme-light .drawing-tools-popup::after {
    border-top-color: rgba(255, 255, 255, 0.95) !important;
}

.theme-light .popup-tool-btn {
    background: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #2a2e39 !important;
}

.theme-light .popup-tool-btn:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}

.theme-light .popup-tool-btn:active {
    background: rgba(0, 0, 0, 0.15) !important;
}

.theme-light .popup-tool-btn.active {
    background: rgba(41, 98, 255, 0.15) !important;
    border-color: rgba(41, 98, 255, 0.3) !important;
    color: #2962ff !important;
}

.theme-light .popup-tool-label {
    color: #2a2e39 !important;
}

/* 最高优先级移动端强制规则 */
@media only screen and (max-width: 768px) {
    /* 强制显示移动端布局 */
    .mobile-layout-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 9999 !important;
        position: relative !important;
        pointer-events: auto !important; /* 紧急修复：确保移动端容器可以交互 */
    }

    /* 紧急修复：确保所有移动端按钮可以点击 */
    .mobile-layout-container button,
    .mobile-layout-container .mobile-timeframe-btn,
    .mobile-layout-container .mobile-analysis-btn,
    .mobile-layout-container .hamburger-menu-btn {
        pointer-events: auto !important;
        z-index: 10005 !important; /* 提高到比modal更高 */
        position: relative !important;
    }

    /* 超级强力修复：确保移动端按钮区域可交互 */
    .mobile-layout-container .mobile-row-2,
    .mobile-layout-container .mobile-header {
        pointer-events: auto !important;
        z-index: 9999 !important;
        position: relative !important;
    }

    /* 终极修复：移除任何可能阻挡按钮的透明覆盖层 */
    .mobile-layout-container * {
        cursor: auto !important;
    }

    .mobile-layout-container button {
        cursor: pointer !important;
    }

    /* 移动端表头正常显示，不再需要隐藏规则 */

    /* 修复表头与股票列表之间的缝隙 */
    #stock-list-panel {
        padding-top: 0 !important;
    }

    /* 修复表头与列表间隙问题 - 加强版 */
    .stock-list-header {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }
    .stock-list-container .stock-list-header:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    .stock-list {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 防止表头文字换行 */
    .header-col .header-text {
        white-space: nowrap !important; /* 防止换行 */
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* 文字过长时显示省略号 */
    }

    /* 确保涨跌幅列有足够宽度 */
    .header-col.col-change {
        min-width: 75px !important; /* 从60px增加到75px确保"涨跌幅"完整显示 */
    }

    .stock-list-content > .stock-item:first-child {
        margin-top: 0 !important;
        border-top: none !important;
    }

    .stock-list-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 强制移除表头与列表之间的所有间距 */
    #stock-list-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #stock-list-container .stock-list-header {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    #stock-list-container .stock-list-content {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 移动端收缩按钮样式优化 */
    .lhb-collapsed-button {
        width: 45px !important;
        height: 45px !important;
        z-index: 1200 !important;
        font-size: 16px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }

    .lhb-collapsed-button.show {
        display: flex !important;
    }

    .lhb-collapsed-button:active {
        transform: scale(0.95) !important;
        background: rgba(33, 38, 45, 0.8) !important;
    }

    /* 确保控制按钮有足够的点击区域 */
    .lhb-panel-controls button {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 防止按钮被遮挡 */
    .lhb-panel-minimize,
    .lhb-panel-close {
        position: relative !important;
        z-index: 1003 !important;
        touch-action: manipulation !important; /* 优化移动端触控 */
    }
    
    /* 强制隐藏桌面端元素 */
    .left-toolbar-column,
    .left-toolbar-column * {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* 桌面端强制规则 - 确保桌面端不显示移动端布局 */
@media only screen and (min-width: 769px) {
    /* 强制隐藏移动端布局 */
    .mobile-layout-container {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* 强制隐藏桌面端的汉堡菜单按钮（仅移动端使用） */
    .left-toolbar-column .hamburger-menu-btn,
    #hamburger-menu-btn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* 确保桌面端布局正常显示 */
    .left-toolbar-column {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        left: auto !important;
        width: auto !important;
        height: auto !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }
    
    .main-toolbar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* 强制隐藏桌面端的移动端底部工具栏 */
    .mobile-bottom-toolbar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* 确保桌面端符号信息区域布局正确 */
    .symbol-info {
        display: flex !important; /* 使用flex而不是inline-flex */
        align-items: center !important;
        gap: 0 !important; /* 移除gap，紧贴内容 */
        width: auto !important; /* 改为auto，不要占用全部宽度 */
        flex: none !important; /* 关键：覆盖原始的flex: 1，不占用额外空间 */
        flex-shrink: 0 !important; /* 不压缩 */
        justify-content: flex-start !important;
        margin-right: 16px !important; /* 添加右边距与后面元素分隔 */
    }
    
    /* 限制搜索区域的宽度 */
    .symbol-selector {
        max-width: 120px !important; /* 进一步限制最大宽度 */
        min-width: 80px !important; /* 减小最小宽度 */
        width: auto !important;
        padding: 4px 8px !important; /* 减小内边距 */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* 限制搜索按钮内的文字大小 */
    .symbol-selector .symbol-name {
        font-size: 12px !important; /* 减小字体 */
        max-width: 70px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* 优化价格信息区域宽度 */
    .symbol-price {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
        flex: none !important; /* 不占用额外空间 */
        flex-shrink: 0 !important;
        min-width: 100px !important;
        max-width: 150px !important;
        margin-right: 16px !important;
    }
    
    /* 优化焦点信息区域宽度 */
    .focus-info {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        width: auto !important;
        flex: none !important; /* 不占用额外空间 */
        flex-shrink: 0 !important;
        min-width: 180px !important;
        max-width: 250px !important;
        margin-right: 16px !important;
    }
    
    /* 确保图例区域占用剩余空间并正常显示 */
    .legend-area {
        flex: 1 !important; /* 占用剩余空间 */
        display: flex !important;
        align-items: center !important;
        gap: 16px !important; /* 减小间距 */
        margin-left: 0 !important; /* 移除左边距，因为前面元素已有右边距 */
        justify-content: flex-start !important;
        min-width: 0 !important; /* 允许收缩 */
    }
    
    /* 确保时间选择器和分析工具正常显示 */
    .timeframe-selector {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        flex-shrink: 0 !important;
        margin-right: 16px !important;
    }
    
    .analysis-tools {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-shrink: 0 !important;
    }
    
    /* 确保主工具栏正确布局 */
    .main-content-area .main-toolbar,
    .chart-header .main-toolbar {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important; /* 减小整体间距 */
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* 修复桌面端主内容区域左对齐问题 */
    .app-layout {
        display: flex !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }
    
    .main-content-area {
        margin-left: 0 !important;
        padding-left: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    .chart-header {
        margin: 0 !important;
        padding: 8px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    /* 确保所有桌面端内容都左对齐 */
    body, html {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .chart-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        height: 100vh !important;
    }
}

/* ================================
   全局移动端强制规则（优先级最高）
   ================================ */

/* 移动端强制显示规则 */
@media only screen and (max-width: 768px) {
    .hamburger-menu-btn {
        display: flex !important;
        position: relative !important;
        z-index: 1001 !important;
    }
    
    .mobile-bottom-toolbar {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1200 !important;
    }
    
    .left-toolbar-column .user-avatar,
    .left-toolbar-column .drawing-toolbar,
    .left-toolbar-column .more-toolbar {
        display: none !important;
    }
}

/* ================================
   简化iOS安全区域适配 - 统一处理
   ================================ */

/* 基础iOS安全区域支持 - 简化为最小必要处理 */
@supports (padding: max(0px)) {
    /* 统一iOS底部安全区域处理 */
    .mobile-bottom-toolbar {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }
    
    /* 优化iOS顶部安全区域处理 - 减少留白 */
    .mobile-row-1 {
        padding-top: max(4px, env(safe-area-inset-top, 4px)) !important;
    }
}

/* 统一移动端布局 - 简化三层结构布局 */
@media only screen and (max-width: 768px) {
    /* 统一主容器结构 - 使用flex布局 */
    .app-layout {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
    }
    
    /* 统一主内容区域 - 自动占用剩余空间 */
    .main-content-area {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        min-height: 0 !important; /* 允许flex子项收缩 */
    }
    
    /* 移动端图表内容区域优化 */
    .chart-content {
        flex: 1 !important;
        display: flex !important;
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    
    /* 统一底部工具栏样式 - 优化75px高度适配6按钮布局 */
    .mobile-bottom-toolbar {
        height: 75px !important;
        padding: 12px 6px !important; /* 减少左右边距以适配6个按钮 */
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #2a2e39 !important;
        border-top: 1px solid #3a3e49 !important;
        z-index: 1200 !important;
        display: flex !important;
        justify-content: space-between !important; /* 改为space-between确保按钮均匀分布 */
        align-items: center !important;
        box-sizing: border-box !important;
        gap: 2px !important; /* 添加按钮间距 */
    }
    
    /* 统一底部工具栏按钮样式 - 6按钮布局优化 */
    .bottom-tool-btn {
        flex: 1 !important; /* 使按钮均匀分布 */
        max-width: 52px !important; /* 限制最大宽度以适配小屏幕 */
        min-width: 42px !important; /* 保证最小可点击区域 */
        height: 48px !important; /* 增加高度确保良好的触摸体验 */
        font-size: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 4px 2px !important;
        background: transparent !important;
        border: none !important;
        color: #d1d4dc !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        border-radius: 6px !important;
    }
    
    .bottom-tool-btn svg {
        width: 18px !important; /* 稍微减小图标以适配更紧凑的布局 */
        height: 18px !important;
        margin-bottom: 2px !important;
    }
    
    .bottom-tool-label {
        font-size: 8px !important; /* 减小字体以适配6按钮布局 */
        max-width: 48px !important;
        text-align: center !important;
        line-height: 1.1 !important;
        font-weight: 500 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* 底部工具栏按钮活动状态 */
    .bottom-tool-btn:hover,
    .bottom-tool-btn.active {
        background: rgba(30, 83, 229, 0.15) !important;
        color: #60a5fa !important;
    }
    
    .bottom-tool-btn:active {
        background: rgba(30, 83, 229, 0.25) !important;
        transform: scale(0.95) !important;
    }
    
    /* 特殊按钮样式 - 计算器按钮 */
    #mobile-calculator-toggle {
        position: relative !important;
    }
    
    /* 移除计算器按钮的绿点 - 用户反馈不需要
    #mobile-calculator-toggle::after {
        content: '' !important;
        position: absolute !important;
        top: 2px !important;
        right: 2px !important;
        width: 6px !important;
        height: 6px !important;
        background: #10b981 !important;
        border-radius: 50% !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }
    
    #mobile-calculator-toggle.active::after {
        opacity: 1 !important;
    }
    */
    
    /* 统一图表容器样式 - 确保时间轴可见 */
    /* 移除全局margin-bottom，改为在统一规则中按模式设置 */
    .chart-container {
        flex: 1 !important;
        position: relative !important;
        background: #131722 !important;
        touch-action: pan-x pan-y !important;
        width: 100% !important;
        min-height: 300px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        /* margin-bottom在后面的统一规则中设置 */
    }
    
    /* 统一右侧面板安全距离 */
    .right-panel {
        padding-bottom: 140px !important; /* 🔧 进一步增大安全距离确保访客数量完全可见 */
    }
    
    /* 🔧 统一面板底部容器 - 强制隐藏解决缓存加载时底部空隙 */
    .panel-footer {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
    }
    
    .import-section,
    .action-section {
        margin-bottom: 8px !important; /* 🔧 压缩容器间距：从15px → 8px */
        padding: 8px 12px !important; /* 压缩内边距节省空间 */
    }
    
    .import-actions,
    .panel-actions {
        padding-bottom: 2px !important; /* 🔧 进一步压缩底部内边距：从4px → 2px */
        padding-top: 2px !important; /* 🔧 进一步压缩顶部内边距：从4px → 2px */
        margin-bottom: 4px !important; /* 🔧 进一步压缩底部外边距：从6px → 4px */
    }
    
    .panel-footer button,
    .import-section button,
    .action-section button {
        margin-bottom: 8px !important;
        min-height: 44px !important;
    }
    
    /* 统一面板滚动优化 */
    .right-panel {
        overflow-y: auto !important;
        scroll-padding-bottom: 140px !important; /* 🔧 与padding-bottom保持一致 */
    }
    
.import-actions button,
.panel-actions button,
.panel-footer button {
    margin-bottom: 10px !important;
    min-height: 44px !important;
    background: #ffffff !important;
    color: #1f2330 !important;
    border: 1px solid rgba(31, 35, 48, 0.1) !important;
    box-shadow: none !important;
}

.import-actions button:hover,
.panel-actions button:hover,
.panel-footer button:hover {
    background: #f3f6fb !important;
    color: #1f2330 !important;
}
    
    /* 横屏规则已删除 - 平板现在使用桌面端样式 */
    /* 删除了导致65px覆盖问题的规则 */
}

/* 简化iOS设备优化 - 移除复杂的差异化处理 */
@supports (-webkit-touch-callout: none) {
    /* 仅保留关键iOS修复 */
    body {
        background: #131722 !important;
        -webkit-appearance: none;
    }
}

/* ================================
   响应式断点定义
   ================================ */

/* 真正的手机设备断点: ≤480px (只针对小屏设备) */
@media only screen and (max-width: 480px) {
    
    /* 最高优先级：强制隐藏桌面端用户头像和工具栏 */
    .left-toolbar-column {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        left: -9999px !important;
    }
    
    /* ================================
       基础移动端样式重置
       ================================ */
    
    html, body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        font-size: 14px; /* 移动端字体稍小 */
        margin: 0;
        padding: 0;
    }
    
    /* 隐藏桌面端元素 */
    .chart-page {
        overflow: hidden !important;
    }
    
    /* 强制隐藏桌面端的左侧工具栏和用户头像 (真正的小屏设备) */
    .left-toolbar-column .user-avatar,
    .left-toolbar-column .drawing-toolbar,
    .left-toolbar-column .more-toolbar {
        display: none !important;
    }
    
    /* 强制移动端布局 */
    body.mobile-layout {
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }
    
    /* 确保移动端优先级最高 */
    @media screen and (max-width: 768px) {
        .left-toolbar-column {
            flex-direction: row !important;
            justify-content: space-between !important;
        }
        
        .hamburger-menu-btn {
            display: flex !important;
        }
        
        .user-avatar {
            order: 2 !important;
        }
    }
    
    /* 触摸优化 */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* ================================
       主布局适配
       ================================ */
    
    /* 强制覆盖桌面端布局 */
    .chart-wrapper {
        width: 100% !important;
        height: 100vh !important;
        overflow: hidden !important;
    }
    
    .app-layout {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        width: 100vw !important;
        overflow: hidden !important;
        position: relative !important;
    }
    
    /* 左侧工具栏移动端适配 - 隐藏，使用新的三行布局 */
    .left-toolbar-column {
        display: none !important;
    }
    
    /* 移动端汉堡菜单按钮样式（在三行布局中使用） */
    .mobile-layout-container .hamburger-menu-btn {
        width: 28px; /* 缩小按钮 */
        height: 28px;
        border: none;
        background: transparent;
        color: #d1d4dc;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
        position: relative; /* 确保按钮可以设置z-index */
        z-index: 10005 !important; /* 紧急修复：确保按钮在最顶层 */
        pointer-events: auto !important; /* 紧急修复：确保按钮可以点击 */
    }
    
    .mobile-layout-container .hamburger-menu-btn:hover,
    .mobile-layout-container .hamburger-menu-btn.active {
        background: #3a3e49;
        color: #1e53e5;
    }
    
    /* 汉堡菜单图标动画 */
    .hamburger-icon {
        width: 16px;
        height: 16px;
        position: relative;
        transition: all 0.3s ease;
    }
    
    .hamburger-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background: currentColor;
        border-radius: 1px;
        position: absolute;
        transition: all 0.3s ease;
        transform-origin: center;
    }
    
    .hamburger-icon span:nth-child(1) {
        top: 2px;
    }
    
    .hamburger-icon span:nth-child(2) {
        top: 7px;
    }
    
    .hamburger-icon span:nth-child(3) {
        top: 12px;
    }
    
    /* 汉堡菜单激活时的动画 */
    .mobile-layout-container .hamburger-menu-btn.active .hamburger-icon span:nth-child(1) {
        transform: rotate(45deg);
        top: 7px;
    }
    
    .mobile-layout-container .hamburger-menu-btn.active .hamburger-icon span:nth-child(2) {
        opacity: 0;
        transform: scale(0);
    }
    
    .mobile-layout-container .hamburger-menu-btn.active .hamburger-icon span:nth-child(3) {
        transform: rotate(-45deg);
        top: 7px;
    }
    
    /* 汉堡菜单下拉面板 */
    .hamburger-dropdown {
        position: fixed;
        top: 60px; /* 紧贴顶部工具栏 */
        left: 0;
        width: 280px;
        /* 🔧 修复：更精确的高度计算，考虑移动端安全区域 */
        max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 140px);
        background: #2a2e39;
        border-right: 1px solid #3a3e49;
        border-bottom: 1px solid #3a3e49;
        z-index: 999;
        /* 🔧 增强滚动配置 */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* iOS原生滚动 */
        scroll-behavior: smooth; /* 平滑滚动 */
        overscroll-behavior-y: contain; /* 防止滚动链 */
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.3);
    }
    
    .hamburger-dropdown.open {
        transform: translateX(0);
    }
    
    /* 汉堡菜单背景遮罩 */
    .hamburger-overlay {
        position: fixed;
        top: 60px;
        left: 0;
        width: 100vw;
        height: calc(100vh - 60px);
        background: rgba(0, 0, 0, 0.3);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .hamburger-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* 汉堡菜单内容区域 */
    .hamburger-menu-section {
        padding: 16px;
        border-bottom: 1px solid #3a3e49;
    }
    
    .hamburger-menu-section:last-child {
        border-bottom: none;
        margin-bottom: 16px; /* 🔧 确保最后一项有足够间距，避免被遮挡 */
    }
    
    /* 🔧 汉堡菜单滚动条样式（移动端可见但不突兀） */
    .hamburger-dropdown::-webkit-scrollbar {
        width: 4px;
    }

    .hamburger-dropdown::-webkit-scrollbar-track {
        background: transparent;
    }

    .hamburger-dropdown::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        transition: background 0.2s ease;
    }
    
    .hamburger-dropdown::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.5);
    }
    
    .hamburger-section-title {
        font-size: 12px;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
        font-weight: 500;
    }
    
    /* 绘图工具在汉堡菜单中的样式 */
    .hamburger-drawing-tools {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    /* 鼠标工具专用2列横向布局 */
    .hamburger-mouse-tools {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .hamburger-tool-btn {
        width: 100%;
        height: 48px;
        border: none;
        background: #131722;
        color: #d1d4dc;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 10px;
        gap: 4px;
        border: 1px solid transparent;
    }
    
    .hamburger-tool-btn:hover {
        background: #3a3e49;
        border-color: #4a4e59;
    }
    
    .hamburger-tool-btn.active {
        background: #1e53e5;
        color: white;
        border-color: #1e53e5;
    }
    
    .hamburger-tool-btn svg {
        width: 16px;
        height: 16px;
    }
    
    .hamburger-tool-label {
        font-size: 9px;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    
    /* 用户信息在汉堡菜单中的样式 */
    .hamburger-user-info {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        background: #131722;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .hamburger-user-info:hover {
        background: #3a3e49;
    }
    
    .hamburger-user-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #1e53e5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 14px;
    }
    
    .hamburger-user-details {
        flex: 1;
    }
    
    .hamburger-user-name {
        font-size: 14px;
        color: #d1d4dc;
        font-weight: 500;
        margin-bottom: 2px;
    }
    
    .hamburger-user-status {
        font-size: 11px;
        color: #999;
    }
    
    /* 更多功能在汉堡菜单中的样式 */
    .hamburger-more-options {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .hamburger-option-btn {
        width: 100%;
        height: 48px; /* 增加高度以适应垂直布局 */
        border: none;
        background: transparent;
        color: #d1d4dc;
        border-radius: 4px;
        display: flex;
        flex-direction: column; /* 垂直排列 */
        align-items: center;
        justify-content: center;
        gap: 4px; /* 减少间距 */
        padding: 4px; /* 调整内边距 */
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 13px;
        text-align: center; /* 居中文字 */
    }
    
    .hamburger-option-btn:hover {
        background: #3a3e49;
    }
    
    .hamburger-option-btn svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    
    .hamburger-option-label {
        font-size: 11px; /* 减小字体以适应网格布局 */
        line-height: 1.2;
        text-align: center;
    }
    
    /* 移动端用户头像样式（在三行布局中） */
    .mobile-user-avatar {
        display: flex;
        align-items: center;
        cursor: pointer;
        flex-shrink: 0;
    }
    
    .mobile-user-avatar .avatar-circle {
        width: 24px; /* 缩小头像 */
        height: 24px;
        border-radius: 50%;
        background: #1e53e5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        transition: all 0.2s ease;
    }
    
    .mobile-user-avatar .avatar-circle svg {
        width: 12px; /* 调整图标大小 */
        height: 12px;
    }
    
    .mobile-user-avatar:hover .avatar-circle {
        background: #2e63f5;
        transform: scale(1.05);
    }
    
    /* ================================
       主内容区域适配
       ================================ */
    
    .main-content-area {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        margin-top: 0 !important; /* 移除顶部margin，使用新的两行布局 */
        margin-bottom: 0 !important; /* 移除底部margin，在高度计算中已考虑 */
        margin-left: 0 !important; /* 移除桌面端的左边距 */
        overflow: hidden !important;
        width: 100% !important;
        /* 移除硬编码高度计算，改用flex自动分配 + chart-container的margin-bottom处理底部间距 */
        min-height: 0 !important; /* 允许flex子项收缩 */
    }
    
    /* 🔧 专用main-content-area优化 */
    .main-content-area {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        min-height: 0 !important;
        /* 使用纯flex布局，由chart-container的margin-bottom处理底部间距 */
    }
    
    /* 确保图表头部正确显示移动端布局 */
    .chart-header {
        flex-shrink: 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }
    
    /* ================================
       移动端三行紧凑布局设计
       ================================ */
    
    /* 图表头部适配 - 三行紧凑化设计 */
    .chart-header {
        padding: 0;
        border-bottom: 1px solid #2a2e39;
        background: #1e222d;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
    }
    
    /* 第一行：汉堡菜单 + 用户头像 + 搜索 + 价格 + OHLC - 优化高度 */
    .mobile-row-1 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 6px 12px; /* 减少上下内边距 */
        background: #2a2e39;
        border-bottom: 1px solid #3a3e49;
        min-height: 44px; /* 减少最小高度 */
    }
    
    .mobile-row-1-left {
        display: flex;
        align-items: center;
        gap: 8px; /* 减少间距 */
        flex: 0 0 auto; /* 不允许伸缩，固定宽度 */
        min-width: 0;
        max-width: 180px; /* 限制左侧最大宽度 */
    }
    
    .mobile-row-1-right {
        display: flex;
        align-items: center;
        gap: 6px; /* 减少间距 */
        flex: 1; /* 允许伸缩占用剩余空间 */
        min-width: 0;
        justify-content: flex-end; /* 右对齐 */
    }
    
    /* 移动端搜索区域 */
    .mobile-search-area {
        display: flex;
        align-items: center;
        background: #131722;
        border: 1px solid #3a3e49;
        border-radius: 3px;
        padding: 4px 8px;
        min-width: 70px; /* 减小最小宽度 */
        max-width: 100px; /* 进一步限制宽度 */
        flex: 1;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 11px; /* 缩小字体 */
    }
    
    .mobile-search-area:hover {
        background: #1e2330;
        border-color: #4a4e59;
    }
    
    .mobile-search-area:active {
        background: #2a2e39;
        border-color: #1e53e5;
    }
    
    .mobile-search-text {
        font-size: 12px;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 500;
    }
    
    /* 移动端价格信息 */
    .mobile-price-info {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 1px;
        margin-right: 4px; /* 减少右边距 */
        min-width: 80px; /* 设置最小宽度 */
        flex-shrink: 0; /* 防止被压缩 */
    }
    
    .mobile-price {
        font-size: 13px; /* 缩小字体 */
        font-weight: 700;
        color: #d1d4dc;
        line-height: 1.1;
        letter-spacing: 0.2px;
        white-space: nowrap; /* 防止换行 */
    }
    
    .mobile-change {
        font-size: 9px; /* 缩小字体 */
        line-height: 1.1;
        font-weight: 500;
        white-space: nowrap; /* 防止换行 */
    }
    
    .mobile-change.positive {
        color: #26a69a;
    }
    
    .mobile-change.negative {
        color: #ef5350;
    }
    
    /* 移动端OHLC信息紧凑显示 */
    .mobile-ohlc {
        display: flex;
        gap: 4px; /* 减少间距 */
        font-size: 9px; /* 缩小字体 */
        color: #999;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-shrink: 1; /* 允许压缩 */
        min-width: 0;
    }
    
    .mobile-ohlc::-webkit-scrollbar {
        display: none;
    }
    
    .mobile-ohlc-item {
        display: flex;
        align-items: center;
        gap: 1px; /* 减少间距 */
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .mobile-ohlc-label {
        color: #777;
        font-size: 8px; /* 进一步缩小 */
        font-weight: 500;
    }
    
    .mobile-ohlc-value {
        color: #d1d4dc;
        font-weight: 600;
        font-size: 9px; /* 缩小字体 */
        letter-spacing: 0.1px;
    }
    
    /* 第二行：时间周期 + 复权选择 + 分析工具 - 紧凑一行布局 */
    .mobile-row-2 {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 4px 8px; /* 减小内边距从 6px 12px 到 4px 8px */
        background: #1e222d;
        border-bottom: 1px solid #3a3e49;
        min-height: 36px; /* 减小高度从 44px 到 36px */
        gap: 3px; /* 减小间距从 6px 到 3px */
        overflow-x: visible; /* 移除滚动，强制显示所有内容 */
        flex-wrap: nowrap; /* 确保不换行 */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .mobile-row-2::-webkit-scrollbar {
        display: none;
    }
    
    .mobile-timeframes {
        display: flex;
        gap: 2px; /* 减小间距从 4px 到 2px */
        flex-shrink: 0;
    }
    
    .mobile-timeframe-btn {
        padding: 3px 5px; /* 减小内边距从 5px 8px 到 3px 5px */
        border: none;
        background: #131722;
        color: #d1d4dc;
        border-radius: 3px;
        font-size: 9px; /* 减小字体从 11px 到 9px */
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 28px; /* 减小最小宽度从 36px 到 28px */
        height: 24px; /* 减小高度从 28px 到 24px */
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid transparent;
        position: relative; /* 确保按钮可以设置z-index */
        z-index: 10005 !important; /* 紧急修复：确保按钮在最顶层 */
        pointer-events: auto !important; /* 紧急修复：确保按钮可以点击 */
    }
    
    .mobile-timeframe-btn:hover {
        background: #3a3e49;
        border-color: #4a4e59;
    }
    
    .mobile-timeframe-btn.active {
        background: #1e53e5;
        color: white;
        border-color: #1e53e5;
        box-shadow: 0 0 0 1px rgba(30, 83, 229, 0.3);
    }
    
    .mobile-adjustment {
        flex-shrink: 0;
    }
    
    .mobile-adjustment-select {
        background: #131722;
        color: #d1d4dc;
        border: 1px solid #3a3e49;
        border-radius: 3px;
        padding: 3px 4px; /* 减小内边距从 5px 6px 到 3px 4px */
        font-size: 8px; /* 减小字体从 10px 到 8px */
        font-weight: 500;
        height: 24px; /* 减小高度从 28px 到 24px */
        min-width: 42px; /* 减小最小宽度从 58px 到 42px */
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
    
    .mobile-adjustment-select:hover {
        background: #3a3e49;
        border-color: #4a4e59;
    }
    
    .mobile-adjustment-select:focus {
        outline: none;
        border-color: #1e53e5;
        box-shadow: 0 0 0 1px rgba(30, 83, 229, 0.3);
    }
    
    /* 移动端分析工具容器（在第二行中） */
    .mobile-analysis-tools {
        display: flex;
        align-items: center;
        gap: 2px; /* 减小间距从 4px 到 2px */
        flex-shrink: 0;
    }
    
    .mobile-analysis-btn {
        display: flex;
        align-items: center;
        gap: 2px; /* 减小内部间距从 3px 到 2px */
        padding: 3px 5px; /* 减小内边距从 4px 8px 到 3px 5px */
        border: none;
        background: #131722;
        color: #d1d4dc;
        border-radius: 3px;
        font-size: 8px; /* 减小字体从 10px 到 8px */
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
        transition: all 0.2s ease;
        height: 24px; /* 减小高度从 28px 到 24px */
        min-width: 38px; /* 减小最小宽度从 50px 到 38px */
        border: 1px solid transparent;
        position: relative; /* 确保按钮可以设置z-index */
        z-index: 10005 !important; /* 紧急修复：确保按钮在最顶层 */
        pointer-events: auto !important; /* 紧急修复：确保按钮可以点击 */
    }
    
    .mobile-analysis-btn:hover:not(.disabled) {
        background: #3a3e49;
        border-color: #4a4e59;
    }
    
    .mobile-analysis-btn.disabled {
        opacity: 0.6;
        cursor: not-allowed;
        color: #999;
    }
    
    .mobile-analysis-btn.active {
        background: #1e53e5;
        color: white;
        border-color: #1e53e5;
        box-shadow: 0 0 0 1px rgba(30, 83, 229, 0.3);
    }
    
    .mobile-switch-icon {
        font-size: 7px; /* 减小字体从 8px 到 7px */
        width: 10px; /* 减小宽度从 12px 到 10px */
        height: 10px; /* 减小高度从 12px 到 10px */
        display: flex;
        align-items: center;
        justify-content: center;
        background: #3a3e49;
        border-radius: 2px;
        color: #999;
        transition: all 0.2s ease;
    }
    
    .mobile-analysis-btn:hover:not(.disabled) .mobile-switch-icon {
        background: #4a4e59;
        color: #d1d4dc;
    }
    
    .mobile-analysis-btn.active .mobile-switch-icon {
        background: rgba(255, 255, 255, 0.25);
        color: white;
    }
    
    .mobile-analysis-btn.disabled .mobile-switch-icon {
        background: #2a2e39;
        color: #666;
    }
    
    .mobile-switch-label {
        font-size: 8px; /* 减小标签字体从 10px 到 8px */
    }
    
/* 增强移动端布局控制 - 精确作用域和双重检测 */
body.mobile-layout .mobile-layout-container,
body.mobile-device .mobile-layout-container {
    display: block !important;
    width: 100% !important;
    position: relative !important;
    z-index: 100 !important;
    background: #2a2e39 !important;
    order: -1 !important; /* 确保在顶部显示 */
}

/* 移动端隐藏桌面工具栏 - 精确作用域控制 */
body.mobile-layout .main-toolbar,
body.mobile-device .main-toolbar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 桌面端确保显示桌面工具栏 - 反向规则，优先级更高 */
body.desktop-layout .main-toolbar,
body.desktop-device .main-toolbar,
body.tablet-layout .main-toolbar,
body.tablet-device .main-toolbar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
}

/* 桌面端隐藏移动端容器 - 反向规则 */
body.desktop-layout .mobile-layout-container,
body.desktop-device .mobile-layout-container,
body.tablet-layout .mobile-layout-container,
body.tablet-device .mobile-layout-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
    
    /* 移动端龙虎榜浮动窗口适配 */
    .lhb-floating-window {
        width: 180px !important;
        font-size: 10px !important;
    }
    
    .lhb-window-title {
        font-size: 10px !important;
    }
    
    .lhb-yzmc-item {
        padding: 4px 8px !important;
        font-size: 10px !important;
    }
    
    .lhb-minimized-btn {
        width: 28px !important;
        height: 28px !important;
        font-size: 10px !important;
    }
    
    .lhb-data-box {
        font-size: 9px !important;
        padding: 4px 6px !important;
        min-width: 120px !important;
        max-width: 140px !important;
    }
    
    .lhb-date-header {
        font-size: 8px !important;
    }
    
    .lhb-amounts {
        gap: 3px !important;
        font-size: 7px !important;
    }
    
    .lhb-amount-item {
        min-width: 22px !important;
    }
    
    .lhb-amount-label {
        font-size: 6px !important;
    }
    
    .lhb-yzmc-name {
        font-size: 8px !important;
    }
    
    /* 强制隐藏桌面端布局 - 只在移动端生效 (已被上方统一规则覆盖，此规则已废弃) */
    
    /* 确保移动端第一行所有元素都显示 - 只在移动端生效 */
    body.mobile-layout .mobile-row-1,
    body.mobile-layout .mobile-row-1-left,
    body.mobile-layout .mobile-row-1-right {
        display: flex !important;
    }

    body.mobile-layout .mobile-search-area,
    body.mobile-layout .mobile-price-info,
    body.mobile-layout .mobile-ohlc {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* ================================
       图表内容区域
       ================================ */
    
    .chart-content {
        flex: 1 !important;
        display: flex !important;
        position: relative !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    
    /* 已在前面定义，这里不需要重复 */
    /* 删除重复的.chart-container规则 */
    
    /* 🔧 专用最大高度优化 - 移除硬编码计算 */
    /* 已在前面定义，删除重复规则 */
    
    /* 移动端K线图容器主题切换支持 */
    .theme-light .chart-container {
        background: var(--chart-background, #ffffff) !important;
    }
    
    /* 移动端图表容器 - 使用自然布局 */
    .chart-container canvas {
        /* 让LightweightCharts自行处理canvas尺寸 */
        max-width: 100%;
        max-height: 100%;
    }
    
    /* 失衡区在移动端的特殊样式 */
    .imbalance-zone-mobile {
        opacity: 0.8 !important; /* 移动端稍微透明 */
    }
    
    /* ================================
       移动端菜单样式
       ================================ */
    
    .mobile-menu {
        position: fixed;
        bottom: 70px; /* 在底部工具栏上方 */
        right: 10px;
        background: #2a2e39;
        border: 1px solid #3a3e49;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        z-index: 9999;
        min-width: 160px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
    }
    
    .mobile-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .mobile-menu-content {
        padding: 8px;
    }
    
    .menu-item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 12px 16px;
        border: none;
        background: transparent;
        color: #d1d4dc;
        font-size: 14px;
        text-align: left;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-bottom: 4px;
    }
    
    .menu-item:hover {
        background: #3a3e49;
        color: #1e53e5;
    }
    
    .menu-item:last-child {
        margin-bottom: 0;
    }
    
    .menu-item svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    
    /* 移动端"更多"菜单主题切换支持 */
    .theme-light .mobile-menu {
        background: #ffffff !important;
        border-color: #e0e3eb !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    }
    
    .theme-light .menu-item {
        color: #2a2e39 !important;
    }
    
    .theme-light .menu-item:hover {
        background: #f0f0f0 !important;
        color: #2962ff !important;
    }
    
    .theme-light .menu-item svg {
        color: inherit !important;
    }
    
    /* ================================
       右侧面板移动端适配（滑动抽屉）
       ================================ */
    
    .right-panel {
        position: fixed;
        right: 0;
        width: 300px;
        height: 100vh; /* 🔧 全屏高度 */
        background: #2a2e39;
        border-left: 1px solid #3a3e49;
        z-index: 999;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        /* 浏览器模式下的底部安全边距 */
        padding-bottom: 140px !important; /* 🔧 进一步增大安全距离确保访客数量完全可见 */
        box-sizing: border-box !important;
    }

    /* 🔧 分离模式定位规则 */
    /* 非PWA模式：允许遮挡顶部价格区域 */
    body:not(.pwa-fullscreen) .right-panel {
        top: 0 !important; /* 允许股票列表遮挡顶部价格信息 */
    }

    /* PWA模式：保持原始位置，避免遮挡 */
    body.pwa-fullscreen .right-panel {
        top: 60px !important; /* 保持PWA模式原始位置，不遮挡顶部区域 */
    }
    
    .right-panel.open {
        transform: translateX(0);
    }
    
    /* 右侧面板背景遮罩 */
    .right-panel-overlay {
        position: fixed;
        left: 0;
        width: 100vw;
        height: 100vh; /* 🔧 全屏高度 */
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    /* 🔧 遮罩层分离模式定位 */
    /* 非PWA模式：全屏遮罩 */
    body:not(.pwa-fullscreen) .right-panel-overlay {
        top: 0 !important; /* 全屏遮罩 */
    }

    /* PWA模式：从顶部区域开始遮罩 */
    body.pwa-fullscreen .right-panel-overlay {
        top: 60px !important; /* 与PWA面板位置保持一致 */
    }
    
    .right-panel-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* 面板标签适配 */
    .panel-tabs {
        display: flex;
        border-bottom: 1px solid #3a3e49;
        background: #2a2e39;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    
    /* 🔧 面板底部安全区域 - panel-footer强制隐藏，其他保持 */
    .panel-footer {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
        visibility: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
    }
    
    .import-section,
    .action-section {
        margin-bottom: 6px !important; /* 🔧 进一步压缩容器间距：从12px → 6px */
        padding-bottom: 4px !important; /* 🔧 压缩底部内边距：从6px → 4px */
        padding-top: 4px !important; /* 🔧 压缩顶部内边距：从6px → 4px */
    }
    
    /* 浏览器模式下底部按钮样式 - 统一为30px高度 */
    body:not(.pwa-fullscreen) .panel-footer button,
    body:not(.pwa-fullscreen) .import-section button,
    body:not(.pwa-fullscreen) .action-section button,
    body:not(.pwa-fullscreen) .import-actions button,
    body:not(.pwa-fullscreen) .panel-actions button {
        width: 100% !important; /* 与PWA模式保持一致的宽度 */
        margin-bottom: 6px !important; /* 🔧 统一按钮间距 */
        min-height: 30px !important; /* 🔧 统一为30px高度，与panel-footer内按钮一致 */
        padding: 6px 10px !important; /* 🔧 统一内边距 */
        font-size: 12px !important; /* 🔧 统一字体大小 */
        line-height: 1.4 !important;
        
        /* 浏览器模式保持轻微的背景色，区别于PWA的完全透明 */
        background: rgba(255, 255, 255, 0.03) !important; /* 极淡背景 */
        border: 1px solid rgba(255, 255, 255, 0.15) !important; /* 淡边框 */
        color: #d1d4dc !important;
        
        position: relative !important;
        z-index: 1 !important; /* 确保按钮在最上层 */
        transition: all 0.2s ease !important;
    }
    
    /* 浏览器模式下右侧面板按钮交互状态 */
    body:not(.pwa-fullscreen) .panel-footer button:hover,
    body:not(.pwa-fullscreen) .import-section button:hover,
    body:not(.pwa-fullscreen) .action-section button:hover,
    body:not(.pwa-fullscreen) .import-actions button:hover,
    body:not(.pwa-fullscreen) .panel-actions button:hover {
        background: rgba(255, 255, 255, 0.08) !important; /* 悬停时稍深的背景 */
        border-color: rgba(255, 255, 255, 0.25) !important;
        color: #ffffff !important;
        transform: translateY(-1px) !important;
    }
    
    body:not(.pwa-fullscreen) .panel-footer button:active,
    body:not(.pwa-fullscreen) .import-section button:active,
    body:not(.pwa-fullscreen) .action-section button:active,
    body:not(.pwa-fullscreen) .import-actions button:active,
    body:not(.pwa-fullscreen) .panel-actions button:active {
        background: rgba(255, 255, 255, 0.12) !important; /* 按下时更深的背景 */
        border-color: rgba(255, 255, 255, 0.35) !important;
        transform: translateY(0) !important;
    }
    
    .panel-tab {
        flex: 1;
        padding: 12px 16px;
        border: none;
        background: transparent;
        color: #d1d4dc;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s ease;
        border-bottom: 2px solid transparent;
    }
    
    .panel-tab.active {
        color: #1e53e5;
        border-bottom-color: #1e53e5;
    }
    
    /* 面板内容 */
    .panel-section {
        padding: 16px;
    }
    
    .panel-section.hidden {
        display: none;
    }
    
    /* ================================
       底部工具栏（移动端新增）
       ================================ */
    
    .mobile-bottom-toolbar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 75px !important;
        background: #2a2e39 !important;
        border-top: 1px solid #3a3e49 !important;
        z-index: 1200 !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 15px 8px !important;
        box-sizing: border-box !important;
    }
    
    .bottom-tool-btn {
        width: 44px;
        height: 44px;
        border: none;
        background: transparent;
        color: #d1d4dc;
        border-radius: 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 10px;
        gap: 2px;
    }
    
    .bottom-tool-btn:hover, .bottom-tool-btn.active {
        background: #1e53e5;
        color: white;
    }
    
    .bottom-tool-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .bottom-tool-label {
        font-size: 9px;
        text-align: center;
        max-width: 44px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* ================================
       模态框移动端适配
       ================================ */
    
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 10003;
        display: none; /* 默认隐藏，只有在显示时才设置为flex */
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    
    .modal.show {
        display: flex; /* 显示时使用flex布局 */
    }
    
    .symbol-search-content,
    .modal-content {
        width: 100%;
        max-width: 400px;
        max-height: 80vh;
        background: #2a2e39;
        border-radius: 8px;
        border: 1px solid #3a3e49;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    
    .search-header,
    .modal-header {
        padding: 16px;
        border-bottom: 1px solid #3a3e49;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .close-btn {
        width: 32px;
        height: 32px;
        border: none;
        background: transparent;
        color: #d1d4dc;
        font-size: 20px;
        cursor: pointer;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .close-btn:hover {
        background: #3a3e49;
    }
    
    /* 搜索输入框适配 */
    .search-input-container {
        padding: 16px;
    }
    
    #symbol-search-input {
        width: 100%;
        padding: 12px;
        border: 1px solid #3a3e49;
        border-radius: 4px;
        background: #131722;
        color: #d1d4dc;
        font-size: 16px; /* 防止iOS缩放 */
    }
    
    /* 市场选择器适配 */
    .market-selector {
        display: flex;
        padding: 0 16px 16px 16px;
        gap: 8px;
    }
    
    .market-btn {
        flex: 1;
        padding: 8px 12px;
        border: 1px solid #3a3e49;
        background: #131722;
        color: #d1d4dc;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .market-btn.active {
        background: #1e53e5;
        border-color: #1e53e5;
        color: white;
    }
    
    /* 搜索结果适配 */
    .search-results {
        flex: 1;
        overflow-y: auto;
        max-height: 300px;
    }
    
    /* ================================
       表单元素移动端优化
       ================================ */
    
    input, select, textarea {
        font-size: 16px; /* 防止iOS自动缩放 */
        border-radius: 4px;
        border: 1px solid #3a3e49;
        background: #131722;
        color: #d1d4dc;
        padding: 12px;
    }
    
    input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: #1e53e5;
        box-shadow: 0 0 0 2px rgba(30, 83, 229, 0.2);
    }
    
    /* 按钮移动端优化 */
    button {
        min-height: 44px; /* 触摸目标最小尺寸 */
        border-radius: 4px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
    .btn-primary {
        background: #1e53e5;
        color: white;
        border: none;
        padding: 12px 24px;
    }
    
    .btn-primary:hover {
        background: #1e53e5dd;
    }
    
    .btn-secondary {
        background: transparent;
        color: #d1d4dc;
        border: 1px solid #3a3e49;
        padding: 12px 24px;
    }
    
    .btn-secondary:hover {
        background: #3a3e49;
    }
    
    /* ================================
       Toast 提示移动端适配
       ================================ */
    
    #toast-container {
        position: fixed;
        top: 80px; /* 避开顶部工具栏 */
        left: 16px;
        right: 16px;
        z-index: 10001;
    }
    
    .toast {
        background: #2a2e39;
        color: #d1d4dc;
        padding: 12px 16px;
        border-radius: 6px;
        border: 1px solid #3a3e49;
        margin-bottom: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        animation: slideInDown 0.3s ease;
    }
    
    @keyframes slideInDown {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    /* ================================
       绘图帮助移动端适配
       ================================ */
    
    #drawing-help {
        position: fixed;
        bottom: 80px; /* 避开底部工具栏 */
        left: 16px;
        right: 16px;
        background: #2a2e39;
        border: 1px solid #3a3e49;
        border-radius: 6px;
        padding: 16px;
        z-index: 999;
        max-height: 200px;
        overflow-y: auto;
        display: none;
    }
    
    #drawing-help h4 {
        margin-bottom: 12px;
        color: #d1d4dc;
        font-size: 14px;
    }
    
    #drawing-help ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    #drawing-help li {
        margin-bottom: 8px;
        font-size: 12px;
        color: #999;
    }
    
    .shortcut {
        background: #131722;
        padding: 2px 6px;
        border-radius: 3px;
        font-weight: bold;
        color: #1e53e5;
        margin-right: 8px;
    }
}

/* ================================
   iOS全屏指引模态框样式
   ================================ */

.ios-fullscreen-guide {
    background: #2a2e39;
    border-radius: 12px;
    max-width: 360px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    border: 1px solid #3a3e49;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.guide-header {
    padding: 20px;
    border-bottom: 1px solid #3a3e49;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.guide-header h3 {
    margin: 0;
    color: #d1d4dc;
    font-size: 18px;
    font-weight: 600;
}

.guide-content {
    padding: 20px;
}

.guide-text {
    margin-bottom: 20px;
}

.guide-text p {
    margin: 0;
    color: #999;
    font-size: 14px;
    line-height: 1.5;
}

.guide-steps {
    margin-bottom: 20px;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    background: #131722;
    border-radius: 8px;
    border: 1px solid #3a3e49;
}

.step-item:last-child {
    margin-bottom: 0;
}

.step-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #2962ff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-title {
    font-size: 14px;
    font-weight: 600;
    color: #d1d4dc;
    margin-bottom: 4px;
}

.step-desc {
    font-size: 13px;
    color: #999;
    line-height: 1.4;
}

.guide-tip {
    background: #1e53e5;
    background: linear-gradient(135deg, #1e53e5 0%, #2962ff 100%);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 20px;
    font-size: 13px;
    color: white;
    line-height: 1.5;
}

.guide-tip strong {
    font-weight: 600;
}

.guide-footer {
    padding: 20px;
    border-top: 1px solid #3a3e49;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #999;
    user-select: none;
}

.checkbox-container input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 16px;
    height: 16px;
    border: 1px solid #3a3e49;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.checkbox-container input[type="checkbox"]:checked + .checkmark {
    background: #2962ff;
    border-color: #2962ff;
}

.checkbox-container input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.button-group {
    display: flex;
    gap: 12px;
}

.btn-secondary,
.btn-primary {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-secondary {
    background: transparent;
    color: #d1d4dc;
    border: 1px solid #3a3e49;
}

.btn-secondary:hover {
    background: #3a3e49;
    border-color: #4a4e59;
}

.btn-primary {
    background: #2962ff;
    color: white;
    border: 1px solid #2962ff;
}

.btn-primary:hover {
    background: #1e4bb8;
    border-color: #1e4bb8;
}

/* 主题切换支持 */
.theme-light .ios-fullscreen-guide {
    background: #ffffff;
    border-color: #e0e3eb;
    color: #2a2e39;
}

.theme-light .guide-header {
    border-bottom-color: #e0e3eb;
}

.theme-light .guide-header h3 {
    color: #2a2e39;
}

.theme-light .guide-text p {
    color: #6b7280;
}

.theme-light .step-item {
    background: #f7f8fa;
    border-color: #e0e3eb;
}

.theme-light .step-title {
    color: #2a2e39;
}

.theme-light .step-desc {
    color: #6b7280;
}

.theme-light .guide-footer {
    border-top-color: #e0e3eb;
}

.theme-light .checkbox-container {
    color: #6b7280;
}

.theme-light .checkmark {
    border-color: #d1d4dc;
}

.theme-light .btn-secondary {
    color: #2a2e39;
    border-color: #d1d4dc;
}

.theme-light .btn-secondary:hover {
    background: #f0f0f0;
    border-color: #9ca3af;
}
}

/* ================================
   移动端调试面板
   ================================ */

/* 移动端调试面板 - 解决移动设备无法查看控制台的问题 */
.mobile-debug-panel {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 10000;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 11px;
    line-height: 1.3;
    user-select: text;
    -webkit-user-select: text;
}

/* 调试按钮 - 始终可见的浮动按钮 */
.debug-toggle-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    background: rgba(30, 83, 229, 0.9);
    border: none;
    border-radius: 22px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.debug-toggle-btn:hover {
    background: rgba(30, 83, 229, 1);
    transform: scale(1.05);
}

.debug-toggle-btn:active {
    transform: scale(0.95);
}

/* 调试面板主体 - 可展开收起的信息面板 */
.debug-panel-content {
    position: absolute;
    top: 50px;
    right: 0;
    width: 320px;
    max-width: calc(100vw - 20px);
    max-height: 60vh;
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    transform: scale(0);
    transform-origin: top right;
    transition: all 0.3s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 10001 !important;
}

.debug-panel-content.show {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* 调试面板头部 */
.debug-panel-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(30, 83, 229, 0.8), rgba(41, 98, 255, 0.8));
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.debug-panel-title {
    font-size: 12px;
}

.debug-clear-btn {
    background: none;
    border: none;
    color: white;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.debug-clear-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* 调试面板内容区域 */
.debug-panel-body {
    max-height: 50vh;
    overflow-y: auto;
    padding: 0;
}

/* 状态监控区域 */
.debug-status-section {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.debug-section-title {
    color: #60a5fa;
    font-weight: bold;
    font-size: 11px;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.debug-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.debug-status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 10px;
}

.debug-status-label {
    color: #9ca3af;
}

.debug-status-value {
    color: #d1d4dc;
    font-weight: bold;
}

.debug-status-value.success {
    color: #10b981;
}

.debug-status-value.error {
    color: #ef4444;
}

.debug-status-value.warning {
    color: #f59e0b;
}

/* 日志区域 */
.debug-logs-section {
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

.debug-log-item {
    padding: 6px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 10px;
    word-wrap: break-word;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.debug-log-time {
    color: #6b7280;
    flex-shrink: 0;
    font-size: 9px;
    min-width: 50px;
}

.debug-log-level {
    flex-shrink: 0;
    font-weight: bold;
    min-width: 35px;
}

.debug-log-level.info {
    color: #60a5fa;
}

.debug-log-level.warn {
    color: #f59e0b;
}

.debug-log-level.error {
    color: #ef4444;
}

.debug-log-level.success {
    color: #10b981;
}

.debug-log-message {
    flex: 1;
    color: #d1d4dc;
    line-height: 1.4;
}

/* 空状态 */
.debug-logs-empty {
    padding: 20px 16px;
    text-align: center;
    color: #6b7280;
    font-size: 10px;
}

/* 问题诊断和恢复功能区 */
.debug-actions-section {
    margin: 10px 0;
    border-top: 1px solid #333;
    padding-top: 10px;
}

.debug-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.debug-action-btn {
    background: #2a5885;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 11px;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
    min-height: 36px;
}

.debug-action-btn:hover {
    background: #3a6895;
}

.debug-action-btn:active {
    background: #1a4875;
    transform: translateY(1px);
}

.debug-action-btn:disabled {
    background: #555;
    color: #999;
    cursor: not-allowed;
}

/* 滚动条样式 */
.debug-panel-body::-webkit-scrollbar,
.debug-logs-section::-webkit-scrollbar {
    width: 4px;
}

.debug-panel-body::-webkit-scrollbar-track,
.debug-logs-section::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.debug-panel-body::-webkit-scrollbar-thumb,
.debug-logs-section::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

/* 响应式调整 */
@media screen and (max-width: 480px) {
    .debug-panel-content {
        width: 280px;
        right: -10px;
    }
    
    .debug-toggle-btn {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* ================================
   平板端样式已移除，平板设备将使用桌面端样式
   平板端断点 (>768px) 现在与桌面端保持一致
   ================================ */

/* ================================
   横屏模式已删除 - 平板现在使用桌面端样式
   ================================ */

/* ================================
   移动端样式优化
   ================================ */

/* 
 * 移动端底部工具栏优化
 * 优化底部显示效果
 */
.mobile-bottom-toolbar {
    height: 75px !important; /* 🔧 优化高度：增加到75px确保按钮居中 */
    padding: 15px 8px !important; /* 优化内边距：上下15px确保44px按钮居中 */
    bottom: 0 !important; /* 强制贴底 */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    margin-bottom: 0 !important; /* 移除任何底部边距 */
    box-sizing: border-box !important;
}

/* 移动端按钮统一化 */
.bottom-tool-btn {
    width: 44px !important; /* 🔧 恢复统一尺寸 */
    height: 44px !important; /* 🔧 恢复统一尺寸 */
    font-size: 10px !important; /* 统一字体大小 */
}

.bottom-tool-btn svg {
    width: 20px !important; /* 🔧 恢复统一尺寸 */
    height: 20px !important;
}

.bottom-tool-label {
    font-size: 9px !important; /* 🔧 恢复统一字体大小 */
    max-width: 44px !important; /* 适应统一按钮宽度 */
}

/* 移动端主内容区域 - 使用统一flex布局，不再需要复杂计算 */
.main-content-area {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
    background: #131722 !important; /* 确保主内容区域背景色一致 */
}

/* 移动端图表容器底部间距优化 - 减少视觉空隙 */
/* 注释掉全局规则，避免覆盖特定模式的规则 */
/*
.chart-container {
    margin-bottom: 80px !important;
    min-height: 400px !important;
    box-sizing: border-box !important;
    position: relative !important;
    background: #131722 !important;
}
*/

/* 🔧 重构：移除JavaScript style覆盖的padding强制，确保margin安全距离 */
/* 注释掉，避免覆盖特定模式的规则 */
/*
.chart-container[style] {
    margin-bottom: 80px !important;
    box-sizing: border-box !important;
    padding-bottom: 0 !important;
}
*/

/* ===========================
   图表容器底部间距统一规则
   =========================== */
@media only screen and (max-width: 768px) {
    /* PWA模式 - 增加间距确保时间轴可见 */
    body.pwa-fullscreen .chart-container {
        margin-bottom: 130px !important; /* 🔧 75px工具栏 + 40px时间轴 + 15px缓冲 */
        padding-bottom: 0 !important;
        min-height: 400px !important;
        box-sizing: border-box !important;
        position: relative !important;
        background: #131722 !important;
    }
    
    /* 浏览器模式 - 增加间距确保时间轴可见 */
    body:not(.pwa-fullscreen) .chart-container {
        margin-bottom: 125px !important; /* 75px工具栏 + 50px时间轴空间 */
        padding-bottom: 0 !important;
        min-height: 400px !important;
        box-sizing: border-box !important;
        position: relative !important;
        background: #131722 !important;
    }
    
    /* 带内联样式的图表容器也遵循相同规则 */
    body.pwa-fullscreen .chart-container[style] {
        margin-bottom: 130px !important; /* 🔧 统一为130px，与主规则保持一致 */
        padding-bottom: 0 !important;
    }
    
    body:not(.pwa-fullscreen) .chart-container[style] {
        margin-bottom: 125px !important;
        padding-bottom: 0 !important;
    }
}

/* 🔧 重构：移除子元素高度限制，让LightweightCharts自然渲染 */
body.pwa-fullscreen .chart-container > *,
body.pwa-fullscreen .chart-container canvas,
body.pwa-fullscreen .chart-container table,
body.pwa-fullscreen .chart-container tbody,
body.pwa-fullscreen .chart-container tr,
body.pwa-fullscreen .chart-container td {
    /* 移除所有高度限制，让图表组件拥有完整容器空间进行自然渲染 */
    margin-bottom: 0 !important; /* 仅防止子元素影响外部margin */
    box-sizing: border-box !important;
}

/* 🔧 重构：移除人工时间轴区域标记，让LightweightCharts自然处理时间轴渲染 */
/* 已移除 ::before 和 ::after 伪元素，这些人工边界会干扰图表库的正常渲染逻辑 */

/* 🔧 重构：图表内容区域使用margin创建安全距离 */
body.pwa-fullscreen .chart-content {
    margin-bottom: 0px !important; /* 移除，由.chart-container的95px margin-bottom统一处理 */
    /* 🔧 确保图表内容区域不压缩内部渲染空间 */
    padding-bottom: 0 !important;
    background: #131722 !important; /* 确保内容区域背景色一致 */
}

/* 🔧 新增：浏览器模式专用图表内容区域优化 */
body:not(.pwa-fullscreen) .chart-content {
    margin-bottom: 0px !important; /* 浏览器模式也移除margin-bottom，统一由chart-container处理 */
    padding-bottom: 0 !important; /* 移除padding避免额外间距 */
    background: #131722 !important; /* 确保背景色一致，消除黑色区域 */
    flex: 1 !important; /* 确保占满容器 */
}

/* 修复PWA模式表头高度问题 */
body.pwa-fullscreen .stock-list-header {
    min-height: 44px !important; /* 设置正常高度 */
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
}

body.pwa-fullscreen .header-col {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    justify-content: center !important;
}

body.pwa-fullscreen .header-text {
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* PWA模式下右侧面板安全距离 - 覆盖浏览器模式设置 */
body.pwa-fullscreen .right-panel {
    padding-bottom: 140px !important; /* 🔧 进一步增大PWA模式安全距离确保访客数量完全可见 */
    scroll-padding-bottom: 140px !important;
}

/* PWA模式下右侧面板按钮样式 - 恢复原始尺寸 */
body.pwa-fullscreen .panel-footer button,
body.pwa-fullscreen .import-section button,
body.pwa-fullscreen .action-section button,
body.pwa-fullscreen .import-actions button,
body.pwa-fullscreen .panel-actions button {
    /* PWA模式按钮尺寸 - 减少1/5高度 */
    width: 100% !important; /* 宽度与股票列表一样宽 */
    margin-bottom: 8px !important; /* 恢复原始间距 */
    min-height: 36px !important; /* 从44px减少到36px，减少1/5高度 */
    max-height: 36px !important; /* 限制最大高度 */
    padding: 6px 10px !important; /* 调整内边距 */
    /* 移除字体大小覆盖，使用默认字体大小 */
    line-height: 1.4 !important; /* 恢复正常行高 */
    
    /* 按用户要求：背景色无（透明） */
    background: transparent !important; /* 完全透明背景 */
    border: 1px solid rgba(255, 255, 255, 0.2) !important; /* 细线边框保持可见性 */
    color: #d1d4dc !important; /* 确保文字清晰可见 */
    
    /* 交互状态优化 */
    transition: all 0.2s ease !important;
}

/* PWA模式下右侧面板按钮交互状态 - 保持透明背景 */
body.pwa-fullscreen .panel-footer button:hover,
body.pwa-fullscreen .import-section button:hover,
body.pwa-fullscreen .action-section button:hover,
body.pwa-fullscreen .import-actions button:hover,
body.pwa-fullscreen .panel-actions button:hover {
    background: rgba(255, 255, 255, 0.05) !important; /* 悬停时极淡的背景 */
    border-color: rgba(255, 255, 255, 0.3) !important; /* 加强边框可见性 */
    color: #ffffff !important; /* 悬停时文字更亮 */
    transform: translateY(-1px) !important; /* 轻微上升效果 */
}

body.pwa-fullscreen .panel-footer button:active,
body.pwa-fullscreen .import-section button:active,
body.pwa-fullscreen .action-section button:active,
body.pwa-fullscreen .import-actions button:active,
body.pwa-fullscreen .panel-actions button:active {
    background: rgba(255, 255, 255, 0.1) !important; /* 按下时稍深的背景 */
    border-color: rgba(255, 255, 255, 0.4) !important;
    transform: translateY(0) !important; /* 按下时回到原位 */
}

/* 🔧 PWA模式下面板区域间距优化 - panel-footer视觉隐藏但保持DOM结构 */
body.pwa-fullscreen .panel-footer {
    visibility: hidden !important; /* 🔧 使用visibility而不是display，保持DOM结构 */
    height: 0 !important; /* 🔧 高度为0，视觉上隐藏 */
    overflow: hidden !important; /* 🔧 防止内容溢出 */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    /* 🔧 移除position absolute，保持正常文档流 */
}

body.pwa-fullscreen .import-section,
body.pwa-fullscreen .action-section {
    margin-bottom: 4px !important; /* 🔧 PWA模式进一步压缩区域间距：从8px → 4px */
    padding-bottom: 2px !important; /* 🔧 PWA模式进一步压缩内边距：从4px → 2px */
    padding-top: 2px !important; /* 🔧 PWA模式进一步压缩顶部内边距：从4px → 2px */
}

/* 🔧 修复缓存加载时底部空隙问题 - 统一隐藏panel-footer */
/* 最高优先级规则，确保无论CSS加载时序如何都能生效 */
/* 🔧 修复：让panel-footer在移动端可见，但优化间距 */
@media (max-width: 768px) {
    .panel-footer,
    body .panel-footer,
    .right-panel .panel-footer,
    html .panel-footer,
    html body .panel-footer,
    html body .right-panel .panel-footer,
    .theme-light .panel-footer,
    .theme-dark .panel-footer,
    body.theme-light .panel-footer,
    body.theme-dark .panel-footer {
        display: block !important; /* 🔧 移动端显示底部功能按钮 */
        margin: 2px 0 0 0 !important; /* 🔧 进一步压缩顶部间距：从4px → 2px */
        margin-top: 2px !important;
        margin-bottom: 0 !important;
        padding: 4px 8px !important; /* 🔧 进一步压缩内部间距：从8px 12px → 4px 8px */
        height: auto !important;
        visibility: visible !important;
        position: static !important;
        left: auto !important;
        width: 100% !important;
        overflow: visible !important;
        background: rgba(42, 46, 57, 0.3) !important;
        border-radius: 6px !important; /* 减小圆角：从8px → 6px */
        backdrop-filter: blur(5px) !important;
    }
    
    /* 🔧 移动端底部按钮优化 - 进一步缩小 */
    .panel-footer .import-btn,
    .panel-footer .action-btn {
        padding: 6px 10px !important; /* 减小按钮尺寸：从8px 16px → 6px 10px */
        font-size: 12px !important; /* 缩小字体：从14px → 12px */
        min-height: 30px !important; /* 减小高度：从36px → 30px */
        border-radius: 4px !important; /* 减小圆角：从6px → 4px */
        margin: 0 2px !important; /* 减少按钮间距：从4px → 2px */
        flex: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* 🔧 移动端按钮容器优化 - 调整比例 */
    .panel-footer .import-section {
        display: flex !important;
        gap: 6px !important; /* 减少间距：从8px → 6px */
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }
    
    /* 调整输入框和按钮的宽度比例 */
    .panel-footer .import-input {
        flex: 0 0 65% !important; /* 输入框占65%宽度 */
        padding: 6px 8px !important; /* 减小内边距 */
        font-size: 12px !important; /* 缩小字体 */
        min-height: 30px !important; /* 与按钮高度一致 */
    }
    
    .panel-footer .import-section .import-btn {
        flex: 0 0 30% !important; /* 导入按钮占30%宽度 */
        padding: 6px 8px !important; /* 进一步减小按钮内边距以适应文字 */
    }

    .theme-light .panel-footer,
    body.theme-light .panel-footer,
    .theme-light .right-panel .panel-footer {
        background: #ffffff !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }

    .theme-light .panel-footer .import-btn,
    .theme-light .panel-footer .action-btn,
    body.theme-light .panel-footer .import-btn,
    body.theme-light .panel-footer .action-btn {
        background: #ffffff !important;
        color: #000000 !important;
        border: 1px solid rgba(0, 0, 0, 0.2) !important;
        box-shadow: none !important;
    }

    .theme-light .panel-footer .import-btn:hover,
    .theme-light .panel-footer .action-btn:hover,
    body.theme-light .panel-footer .import-btn:hover,
    body.theme-light .panel-footer .action-btn:hover {
        background: rgba(0, 0, 0, 0.05) !important;
        color: #000000 !important;
        border-color: rgba(0, 0, 0, 0.3) !important;
    }
    
    /* 🔧 移动端股票列表触控优化 */
    .stock-item,
    .unified-stock-item {
        padding: 12px 16px !important;
        min-height: 64px !important;
        line-height: 1.3 !important;
    }

    .stock-action-buttons {
        gap: 10px !important;
        min-height: 80px !important;
        align-items: center !important;
    }

    .stock-button-area {
        opacity: 1 !important;
    }

    .unified-stock-btn,
    .button-spacer {
        width: 36px !important;
        height: 36px !important;
        border-radius: 10px !important;
    }

    .unified-stock-btn svg {
        width: 20px !important;
        height: 20px !important;
    }

    .stock-right-info {
        gap: 6px !important;
        justify-content: flex-end !important;
    }

    .stock-current-price {
        font-size: 16px !important;
    }

    .stock-change-info {
        font-size: 13px !important;
    }

    .stock-left-info .stock-name {
        font-size: 12px !important;
    }

    .stock-index {
        font-size: 13px !important;
        width: 22px !important;
    }

    /* 🔧 加号按钮放大并保持正方形 */
    .add-list-btn {
        width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        box-shadow: 0 2px 8px rgba(66, 133, 244, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    }

    .add-list-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    /* 🔧 操作按钮区域进一步压缩 */
    .action-section {
        margin-top: 4px !important; /* 减少顶部间距 */
        margin-bottom: 8px !important; /* 减少底部间距 */
        padding: 4px 0 !important; /* 减少内边距 */
    }
    
    .action-section button {
        min-height: 30px !important; /* 进一步减小按钮高度 */
        padding: 6px 10px !important; /* 减少按钮内边距 */
        font-size: 11px !important; /* 缩小字体 */
    }
    
    /* 股票数量统计条压缩 - 已合并到下方的统一规则中 */
    
    .stock-basic-info,
    .stock-left-info {
        gap: 1px !important; /* 进一步减少垂直间距：从2px → 1px */
    }
    
    .stock-symbol,
    .stock-code {
        font-size: 13px !important; /* 用户要求增大2px：从11px → 13px */
        line-height: 1.15 !important;
    }
    
    .stock-name {
        font-size: 11px !important; /* 用户要求增大2px：从9px → 11px */
        line-height: 1.15 !important;
    }
    
    .stock-current-price {
        font-size: 13px !important; /* 用户要求增大2px：从11px → 13px */
        line-height: 1.15 !important;
    }
    
    .stock-change-info {
        font-size: 11px !important; /* 用户要求增大2px：从9px → 11px */
        line-height: 1.15 !important;
    }
    
    /* 股票列表按钮尺寸调整 - 缩小为原来的一半 */
    .unified-stock-btn,
    .unified-add-btn,
    .unified-delete-btn {
        width: 18px !important;
        height: 18px !important;
        border-radius: 6px !important;
    }

    .stock-button-area {
        gap: 4px !important;
    }

    .stock-action-buttons {
        min-height: 40px !important;
        gap: 4px !important;
        align-items: center !important;
    }
    
    /* 🔧 操作按钮区域进一步压缩 */
    .action-section {
        margin-top: 4px !important; /* 减少顶部间距 */
        margin-bottom: 8px !important; /* 减少底部间距 */
        padding: 4px 0 !important; /* 减少内边距 */
    }
    
    .action-section button {
        min-height: 30px !important; /* 进一步减小按钮高度 */
        padding: 6px 10px !important; /* 减少按钮内边距 */
        font-size: 11px !important; /* 缩小字体 */
    }

    /* 股票数量统计条压缩 - 整体下移 */
    .stock-count-bar {
        padding: 4px 10px !important; /* 减少内边距 */
        margin-top: 12px !important; /* 从4px增加到12px实现下移 */
        margin-bottom: 4px !important;
        min-height: 24px !important; /* 减小高度 */
        font-size: 11px !important; /* 缩小字体 */
        line-height: 1.2 !important;
    }

    /* 功能按钮面板 - 增加顶部间距实现下移 */
    .panel-footer {
        margin-top: 8px !important; /* 增加顶部间距 */
    }

    /* 流量统计面板最大压缩 - 横向3列布局，最小化空白 */
    #traffic-stats-panel {
        padding: 4px 8px !important; /* 进一步减少内边距 */
        margin-top: 4px !important; /* 从8px减少到4px */
        margin-bottom: 0 !important; /* 移除底部间距消除空白 */
        padding-bottom: 0 !important; /* 确保没有底部内边距 */
    }

    /* 修复非PWA模式间隙问题 - 最大压缩功能按钮和访客统计之间的间距 */
    body:not(.pwa-fullscreen) #traffic-stats-panel {
        margin-top: 4px !important; /* 从8px进一步压缩到4px */
        margin-bottom: 0 !important; /* 确保底部无空白 */
        padding-bottom: 0 !important; /* 明确移除底部间距 */
        /* 修复遮挡问题但保持原有样式 */
        position: relative !important;
        z-index: 100 !important; /* 提高到100确保在最上层 */
        background-color: transparent !important; /* 使用透明背景保持原有样式 */
        /* 移除color设置，让文字颜色继承原有样式 */
    }

    body:not(.pwa-fullscreen) .stock-list-container {
        margin-top: 25px !important; /* 从16px增加到25px */
    }

    /* PWA模式下恢复访客数据原始位置 */
    body.pwa-fullscreen #traffic-stats-panel {
        margin-top: 4px !important; /* 恢复原始值，不受通用规则影响 */
        margin-bottom: 20px !important; /* 保持原有底部间距 */
    }

    body:not(.pwa-fullscreen) .quick-functions-section,
    body:not(.pwa-fullscreen) .action-section {
        margin-top: 2px !important; /* 进一步压缩，从5px减少到2px */
    }

    /* 非PWA模式下最大程度压缩面板间距 */
    body:not(.pwa-fullscreen) .stock-count-bar {
        margin-top: 2px !important; /* 进一步压缩，从5px减少到2px */
    }

    body:not(.pwa-fullscreen) .panel-footer {
        margin-top: 2px !important; /* 进一步压缩，从5px减少到2px */
    }
    
    .traffic-stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important; /* 强制横向3列布局 */
        gap: 4px !important; /* 减少网格间距 */
    }
    
    .traffic-stat-item {
        display: flex !important;
        flex-direction: column !important; /* 保持纵向排列 */
        align-items: center !important;
        padding: 2px !important; /* 进一步减少单项内边距 */
    }

    .stat-label {
        font-size: 8px !important; /* 进一步缩小标签字体 */
        margin-bottom: 0 !important; /* 移除底部间距 */
    }
    
    .stat-value {
        font-size: 11px !important; /* 缩小数值字体 */
        line-height: 1.2 !important;
        color: #60a5fa !important; /* 统一为蓝色，解决颜色不一致问题 */
        font-weight: 600 !important; /* 加粗显示 */
        opacity: 1 !important; /* 确保不透明 */
    }
}

/* 非PWA（浏览器）模式下专用安全距离 */
/* 已在上面的统一规则中定义，注释掉避免重复 */
/*
@media only screen and (max-width: 768px) {
    body:not(.pwa-fullscreen) .chart-container {
        margin-bottom: 110px !important;
    }
}
*/

@media only screen and (max-width: 768px) {
    /* 仅在非PWA模式下应用 - 使用:not()选择器排除PWA模式 */
    body:not(.pwa-fullscreen) .right-panel {
        padding-bottom: 140px !important; /* 🔧 进一步增大非PWA模式安全距离确保访客数量完全可见 */
        scroll-padding-bottom: 140px !important;
        /* 确保面板内容可以滚动到最底部 */
        scroll-behavior: smooth !important;
    }
    
    /* 浏览器模式下面板底部渐变提示 - 更新位置 */
    body:not(.pwa-fullscreen) .right-panel::after {
        content: none;
    }
}

/* 🔧 PWA模式基础布局优化 - 竖屏和横屏通用 */
body.pwa-fullscreen .main-content-area {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0 !important;
    background: #131722 !important; /* 确保背景色一致 */
}

/* PWA横屏适配已删除 - 横屏现在统一处理 */

/* ================================
   统一iOS安全区域处理 - 简化PWA和浏览器差异
   ================================ */

/* 统一的iOS安全区域支持 - PWA和浏览器使用相同逻辑 */
@supports (padding: max(0px)) {
    /* 统一PWA模式底部工具栏安全区域 */
    body.pwa-fullscreen .mobile-bottom-toolbar {
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        height: 75px !important; /* 优化高度：iOS安全区域也使用75px */
        bottom: 0 !important;
    }
    
    /* 已在统一规则中定义为80px，注释掉 */
    /*
    body.pwa-fullscreen .chart-container {
        margin-bottom: 78px !important;
        padding-bottom: 0px !important;
    }
    */
    
    /* 统一PWA模式右侧面板安全距离 */
    body.pwa-fullscreen .right-panel {
        padding-bottom: 140px !important; /* 🔧 进一步与全局设置保持一致，确保访客数量完全可见 */
    }
    
    /* PWA模式基础显示确保 - 最小必要规则 */
    body.pwa-fullscreen .stock-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    body.pwa-fullscreen .stock-list-content {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 横屏规则已删除 - 统一处理 */
}

/* ================================
   高DPI屏幕优化
   ================================ */

@media screen and (min-device-pixel-ratio: 2), 
       screen and (-webkit-min-device-pixel-ratio: 2), 
       screen and (min-resolution: 192dpi), 
       screen and (min-resolution: 2dppx) {
    
    /* 高DPI屏幕下的图标和边框优化 */
    .tool-btn svg,
    .bottom-tool-btn svg {
        transform: translateZ(0); /* 硬件加速 */
    }
    
    /* 1px边框在高DPI屏幕的优化 */
    .left-toolbar-column::after,
    .chart-header::after,
    .mobile-bottom-toolbar::before {
        content: '';
        position: absolute;
        background: #3a3e49;
        transform-origin: 0 0;
        transform: scale(0.5);
    }
    
    .left-toolbar-column::after {
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
    }
    
    .chart-header::after {
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
    }
    
    .mobile-bottom-toolbar::before {
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
    }
}

/* ================================
   移动端滚动条优化
   ================================ */

/* 移动端股票列表滚动优化 - 保持原生滚动体验 */
@media (max-width: 768px) {
    /* 移动端使用更窄的滚动条或隐藏滚动条以保持原生体验 */
    .stock-list-content {
        /* 🔧 保留原始flex布局属性 */
        flex: 1 !important;
        /* 🔧 增强移动端滚动体验 */
        -webkit-overflow-scrolling: touch; /* iOS 原生滚动效果 */
        overflow-x: hidden !important; /* 强制禁用横向滚动 */
        overflow-y: auto !important;
        scroll-behavior: smooth; /* 平滑滚动 */
        overscroll-behavior-y: contain; /* 防止橡皮筋效果影响页面滚动 */
    }
    
    /* 移动端滚动条样式 - 更细更透明 */
    .stock-list-content::-webkit-scrollbar {
        width: 3px; /* 移动端更细的滚动条 */
    }
    
    .stock-list-content::-webkit-scrollbar-track {
        background: transparent; /* 移动端滚动条轨道透明 */
    }
    
    .stock-list-content::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.2); /* 移动端滚动条更透明 */
        border-radius: 2px;
    }
    
    .stock-list-content::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.3);
    }
    
    /* 🔧 在小屏幕设备上保持滚动条可见但不突兀 */
    @media (max-width: 480px) {
        .stock-list-content::-webkit-scrollbar {
            width: 2px; /* 超细滚动条 */
            display: block; /* 保持可见 */
        }
        
        .stock-list-content::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.4);
            border-radius: 1px;
        }
        
        .stock-list-content::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.6);
        }
    }
}

/* ================================
   股票计算器模态框样式
   ================================ */

/* 计算器模态框 */
#stock-calculator-modal .modal-content {
    max-width: 420px !important;
    width: 90% !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
}

.stock-calculator-content {
    padding: 0 !important;
}

.stock-calculator-content .modal-header {
    background: linear-gradient(135deg, #1e53e5, #2962ff) !important;
    color: white !important;
    padding: 16px 20px !important;
    border-radius: 8px 8px 0 0 !important;
}

.stock-calculator-content .modal-header h2 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.stock-calculator-content .modal-body {
    padding: 20px !important;
    background: #2a2e39 !important;
}

/* 计算器表单样式 */
.calculator-form .form-group {
    margin-bottom: 20px !important;
}

.calculator-form label {
    display: block !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    color: #d1d4dc !important;
    margin-bottom: 6px !important;
}

.calculator-form input[type="number"] {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 1px solid #3a3e49 !important;
    border-radius: 6px !important;
    background: #1a1e25 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

.calculator-form input[type="number"]:focus {
    outline: none !important;
    border-color: #1e53e5 !important;
    box-shadow: 0 0 0 3px rgba(30, 83, 229, 0.1) !important;
}

.input-hint {
    font-size: 11px !important;
    color: #8e8e93 !important;
    margin-top: 4px !important;
    line-height: 1.3 !important;
}

/* 计算器操作按钮 */
.calculator-form .form-actions {
    display: flex !important;
    gap: 12px !important;
    margin-top: 24px !important;
}

.calculator-form .btn-primary {
    flex: 2 !important;
    background: linear-gradient(135deg, #1e53e5, #2962ff) !important;
    color: white !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.calculator-form .btn-primary:hover {
    background: linear-gradient(135deg, #1a47cc, #2555e6) !important;
    transform: translateY(-1px) !important;
}

.calculator-form .btn-primary:active {
    transform: translateY(0) !important;
}

.calculator-form .btn-secondary {
    flex: 1 !important;
    background: #3a3e49 !important;
    color: #d1d4dc !important;
    border: none !important;
    padding: 12px 16px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.calculator-form .btn-secondary:hover {
    background: #4a4e59 !important;
}

/* 计算结果显示区域 */
.calculator-results {
    margin-top: 24px !important;
    padding: 20px !important;
    background: linear-gradient(135deg, rgba(30, 83, 229, 0.1), rgba(41, 98, 255, 0.05)) !important;
    border: 1px solid rgba(30, 83, 229, 0.2) !important;
    border-radius: 8px !important;
    animation: fadeInUp 0.3s ease !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0 !important;
        transform: translateY(20px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

.results-header h3 {
    margin: 0 0 16px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #60a5fa !important;
}

/* 主要结果显示 */
.main-result {
    text-align: center !important;
    margin-bottom: 20px !important;
    padding: 16px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 6px !important;
}

.main-result .result-label {
    font-size: 12px !important;
    color: #8e8e93 !important;
    margin-bottom: 4px !important;
    font-weight: 500 !important;
}

.main-result .result-value {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #10b981 !important;
    margin-bottom: 2px !important;
}

.main-result .result-unit {
    font-size: 12px !important;
    color: #8e8e93 !important;
}

/* 详细结果显示 */
.result-details {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.result-details .result-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 12px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 4px !important;
}

.result-details .result-label {
    font-size: 12px !important;
    color: #8e8e93 !important;
    font-weight: 500 !important;
}

.result-details .result-value {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #d1d4dc !important;
}

.result-details .risk-highlight {
    color: #ef4444 !important;
}

/* 计算器提示 */
.calculator-tips {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.tip-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.tip-item:last-child {
    margin-bottom: 0 !important;
}

.tip-icon {
    font-size: 14px !important;
    margin-top: 1px !important;
}

.tip-text {
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: #8e8e93 !important;
}

/* 移动端优化 */
@media only screen and (max-width: 768px) {
    #stock-calculator-modal .modal-content {
        width: 95% !important;
        max-height: 90vh !important;
        margin: 5vh auto !important;
    }
    
    .result-details {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    
    .calculator-form .form-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .calculator-form .btn-primary,
    .calculator-form .btn-secondary {
        flex: none !important;
    }
}

/* 暗色主题下的计算器样式 */
.theme-dark #stock-calculator-modal .modal-content,
.theme-dark .stock-calculator-content .modal-body {
    background: #2a2e39 !important;
}

.theme-dark .calculator-form input[type="number"] {
    background: #1a1e25 !important;
    border-color: #3a3e49 !important;
    color: #ffffff !important;
}

/* 亮色主题下的计算器样式 */
.theme-light #stock-calculator-modal .modal-content,
.theme-light .stock-calculator-content .modal-body {
    background: #ffffff !important;
}

.theme-light .calculator-form label,
.theme-light .result-details .result-value {
    color: #2a2e39 !important;
}

.theme-light .calculator-form input[type="number"] {
    background: #f8f9fa !important;
    border-color: #e1e5e9 !important;
    color: #2a2e39 !important;
}

.theme-light .input-hint,
.theme-light .result-details .result-label,
.theme-light .tip-text {
    color: #6c757d !important;
}

.theme-light .calculator-results {
    background: linear-gradient(135deg, rgba(30, 83, 229, 0.05), rgba(41, 98, 255, 0.02)) !important;
    border-color: rgba(30, 83, 229, 0.15) !important;
}

.theme-light .main-result,
.theme-light .result-details .result-item {
    background: rgba(0, 0, 0, 0.02) !important;
}

/* ================================
   可访问性和动画偏好
   ================================ */

/* 减少动画的用户偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .tool-btn,
    .bottom-tool-btn,
    .panel-tab,
    .timeframe-btn,
    .analysis-btn {
        border: 1px solid currentColor;
    }
    
    .tool-btn.active,
    .bottom-tool-btn.active,
    .panel-tab.active,
    .timeframe-btn.active {
        border-width: 2px;
    }
}

/* 强制深色模式支持 */
@media (prefers-color-scheme: dark) {
    /* 已经是深色主题，确保兼容性 */
    html, body {
        background: #131722;
        color: #d1d4dc;
    }
}

/* ========================== 移动端更多功能弹出菜单样式 ========================== */

/* 移动端弹出菜单基础样式 */
.mobile-popup {
    position: fixed;
    bottom: 75px; /* 底部工具栏高度 */
    right: 10px;
    width: 200px;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    z-index: 1050;
    max-height: 400px;
    overflow: hidden;
}

.mobile-popup.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* 弹出菜单内容区域 */
.mobile-popup-content {
    padding: 0;
}

.mobile-popup-section {
    padding: 16px 12px;
}

.mobile-popup-title {
    font-size: 14px;
    font-weight: 600;
    color: #d1d4dc;
    margin-bottom: 12px;
    text-align: center;
    letter-spacing: 0.5px;
}

/* 弹出菜单选项容器 */
.mobile-popup-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 弹出菜单按钮样式 */
.mobile-popup-btn {
    width: 100%;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: #d1d4dc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
}

.mobile-popup-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(2px);
}

.mobile-popup-btn:active {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(0);
}

.mobile-popup-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.mobile-popup-label {
    flex: 1;
    text-align: left;
}

/* 弹出菜单箭头指示器 */
.mobile-popup::after {
    content: "";
    position: absolute;
    bottom: -8px;
    right: 30px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(0, 0, 0, 0.95);
}

/* 主题适配 - 亮色主题 */
.theme-light .mobile-popup {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.theme-light .mobile-popup::after {
    border-top-color: rgba(255, 255, 255, 0.95);
}

.theme-light .mobile-popup-title {
    color: #2a2e39;
}

.theme-light .mobile-popup-btn {
    background: rgba(0, 0, 0, 0.05);
    color: #2a2e39;
}

.theme-light .mobile-popup-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.theme-light .mobile-popup-btn:active {
    background: rgba(0, 0, 0, 0.15);
}

/* 清除缓存按钮特殊颜色 */
.mobile-popup-btn#mobile-popup-clear-cache {
    color: #ff6b6b;
}

.mobile-popup-btn#mobile-popup-clear-cache:hover {
    background: rgba(255, 107, 107, 0.1);
}

.theme-light .mobile-popup-btn#mobile-popup-clear-cache {
    color: #e53e3e;
}

.theme-light .mobile-popup-btn#mobile-popup-clear-cache:hover {
    background: rgba(229, 62, 62, 0.1);
}

/* ================================
   指数列表移动端按钮隐藏规则
   ================================ */

/* 移动端指数列表隐藏底部操作按钮 - 覆盖通用显示规则 */
@media (max-width: 768px) {
    #stock-list-panel[data-active-list="indices"] .panel-footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        overflow: hidden !important;
    }
}

/* PWA模式下指数列表隐藏底部操作按钮 */
body.pwa-fullscreen #stock-list-panel[data-active-list="indices"] .panel-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}

/* 确保浏览器模式下也隐藏指数列表按钮 */
body:not(.pwa-fullscreen) #stock-list-panel[data-active-list="indices"] .panel-footer {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    overflow: hidden !important;
}