/**
 * K 线详情页样式（与 kline-view.php、kline-view.js 配套）
 *
 * 怎么用：
 * - 改整体背景、字体、页面宽度：改下面「页面整体」和 .page。
 * - 改顶部币种信息区（头像、名称、现价）：改「顶部摘要」和 .summary-logo、#headerPrice。
 * - 改「图表 / 币种信息 / 币种数据」三个标签：改「主导航标签」.nav-tabs。
 * - 改 K 线图高度、周期按钮、数据条：改「图表区」「周期工具栏」「数据条」。
 * - 改鼠标悬停/点击时的浮层：改「浮层 tooltip」。
 * - 改涨跌颜色：改 .price-up / .price-down 和 .value.up / .value.down（红涨绿跌）。
 * - 只改手机端：改文件末尾 @media (max-width: 768px) 里的样式。
 */

/* ========== 页面整体 ========== */
html, body { overflow-x: hidden; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; background: #0b0b0b; color: #e5e7eb; }
.page { max-width: 1280px; margin: 0 auto; padding: 0 16px 40px; box-sizing: border-box; }

/* ========== 通用卡片（图表区用 chart-card 做了透明，其它用 card） ========== */
.card { background: #111111; border: 1px solid #1f1f1f; border-radius: 14px; padding: 16px; }
.chart-card { background: transparent; border: none; border-radius: 0; padding: 0; margin: 0 !important; max-width: 100%; }

/* ========== 顶部摘要：币种头像、名称、符号、现价（#headerPrice） ========== */
.summary-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.summary-title { font-size: 16px; font-weight: 600; }
.summary-sub { font-size: 12px; color: #9ca3af; margin-top: 4px; }
.summary-logo { width: 36px; height: 36px; border-radius: 999px; background: #0f0f0f; border: 1px solid #1f1f1f; object-fit: cover; }

/* ========== 图表区容器与 K 线图尺寸 ========== */
.chart-wrap { margin-top: 0; position: relative; overflow: hidden; width: 100%; }
#chart { height: 520px; width: 100%; }

/* ========== 加载状态 / 错误提示（#status） ========== */
.status { padding: 8px 0 0; font-size: 12px; color: #9ca3af; display: none; }
.status.error { display: block; color: #ef4444; }

/* ========== 周期工具栏：15分钟、1日、分时、均线 等按钮 ========== */
.toolbar { display: flex; gap: 8px; padding-top: 12px; flex-wrap: wrap; align-items: center; }
.toolbar .tab { border: 1px solid #2a2a2a; background: #151515; color: #d1d5db; padding: 6px 10px; border-radius: 8px; font-size: 12px; cursor: pointer; }
.toolbar .tab.active { background: #22c55e; color: #0b0b0b; border-color: #22c55e; }
.toolbar .tab-label { color: #6b7280; font-size: 12px; margin-left: 8px; }
.toolbar .tab#maToggle { margin-left: 4px; }

/* ========== 涨跌颜色（红涨绿跌，用于现价、数据条、浮层） ========== */
.price-up { color: #ef4444; }
.price-down { color: #22c55e; }
#headerPrice.up { color: #ef4444; }
#headerPrice.down { color: #22c55e; }

/* ========== 主导航标签：图表 | 币种信息 | 币种数据 ========== */
.nav-tabs { display: inline-flex; gap: 0; border-bottom: 1px solid #2d2d32; margin-bottom: 16px; }
.nav-tabs .tab { padding: 10px 16px; font-size: 14px; background: transparent; border: none; border-bottom: 2px solid transparent; color: #9ca3af; cursor: pointer; }
.nav-tabs .tab:hover { color: #e5e7eb; }
.nav-tabs .tab.active { color: #22c55e; border-bottom-color: #22c55e; font-weight: 600; }

/* ========== 面板显隐（图表 / 币种信息 / 币种数据 切换） ========== */
.panel { display: none; }
.panel.active { display: block; }

/* ========== 数据条：时间、收、量、涨跌幅、振幅、市值（#dataBar） ========== */
.data-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 10px 12px; background: #222326; border: 1px solid #2d2d32; border-radius: 8px; margin-bottom: 12px; font-size: 12px; }
.data-bar .item { display: flex; align-items: center; gap: 4px; }
.data-bar .label { color: #9ca3af; }
.data-bar .value { font-weight: 600; }
.data-bar .value.down { color: #22c55e; }
.data-bar .value.up { color: #ef4444; }
.kline-data-bar { margin-bottom: 8px; }

/* ========== 币种介绍 / 币种数据 正文 ========== */
.intro h3 { margin: 0 0 8px; font-size: 14px; }
.intro p { margin: 0; font-size: 12px; color: #9ca3af; line-height: 1.6; white-space: pre-line; }

/* ========== 浮层 tooltip（鼠标悬停或点击 K 线时显示的框 #tooltip） ========== */
.tooltip {
    position: absolute; display: none; left: 12px; top: 12px; padding: 8px 10px;
    background: #000; border: 1px solid #333; border-radius: 8px;
    font-size: 12px; color: #fff; pointer-events: none; z-index: 100; min-width: 150px;
}
.tooltip .label { color: #ccc; }
.tooltip .value { color: #fff; }
.tooltip .value.up { color: #ef4444; }
.tooltip .value.down { color: #22c55e; }

/* ========== 热门币种（底部横向卡片，与上方模块左右对齐，固定 3 排×6） ========== */
.hot-coins-section { padding: 0; margin-top: 28px; width: 100%; box-sizing: border-box; }
.hot-coins-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #e5e7eb; }
.hot-coins-loading { color: #9ca3af; font-size: 13px; }
.hot-coins-retry a { color: #60a5fa; text-decoration: none; }
.hot-coins-retry a:hover { text-decoration: underline; }
.hot-coins-list { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; width: 100%; }
.hot-coin-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 14px; background: #111111; border: 1px solid #1f1f1f; border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .2s, background .2s; }
.hot-coin-card:hover { border-color: #333; background: #151515; }
.hot-coin-card img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hot-coin-card .card-symbol { font-weight: 600; font-size: 14px; color: #e5e7eb; }
.hot-coin-card .card-price { font-size: 12px; color: #9ca3af; margin-top: 2px; }
.hot-coin-card .card-pct { font-size: 12px; margin-top: 2px; }
.hot-coin-card .card-pct.up { color: #ef4444; }
.hot-coin-card .card-pct.down { color: #22c55e; }

/* ========== 资讯标签：嵌入币种新闻列表 iframe ========== */
/* 去掉所有外层背景块，只保留文章列表块背景；标题与文章块左对齐 */
#panelNews, #panelNews .news-panel-card, #panelNews .news-panel-header, #panelNews .news-iframe-wrap { background: transparent !important; }
.panel#panelNews .news-panel-card { margin-top: 0; padding: 0; }
.panel#panelNews .news-panel-card h3 { margin-top: 0; margin-bottom: 8px; }
/* 标题与文章块左对齐：均用 .page 的 padding，不加额外 padding */
.panel#panelNews .news-panel-header { padding: 0; }
.news-iframe-wrap { margin-top: 8px; border: none; border-radius: 0; overflow: visible; background: transparent; }
.news-iframe { display: block; width: 100%; min-height: 800px; height: 85vh; border: none; background: transparent; }
.news-empty { color: #9ca3af; font-size: 13px; line-height: 1.6; margin: 0; }
.news-empty code { background: #1f1f1f; padding: 2px 6px; border-radius: 4px; font-size: 12px; color: #e5e7eb; }

/* ========== 手机端覆盖（宽度 ≤768px）：禁止整页横滑、图表高度、内边距等 ========== */
@media (max-width: 768px) {
    html, body { overflow-x: hidden; max-width: 100vw; }
    .page { padding: 0 8px 24px; max-width: 100%; overflow-x: hidden; }
    .panel#panelChart { padding: 0; }
    .chart-card { padding: 0; }
    .chart-wrap { margin: 0; width: 100%; }
    #chart { margin: 0; height: 50vh; min-height: 280px; }
    .summary-header .summary-logo { display: block !important; visibility: visible !important; width: 32px; height: 32px; }
    .data-bar { margin-left: 0; margin-right: 0; }
    .hot-coins-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .news-iframe { min-height: 600px; height: 75vh; }
    /* 手机端：去掉一层背景块，只保留文章块 */
    #panelNews, #panelNews .news-panel-card, #panelNews .news-panel-header, #panelNews .news-iframe-wrap { background: transparent !important; }
    .panel#panelNews .news-panel-header { padding: 0; }
}
@media (max-width: 480px) {
    .hot-coins-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}