/* =============================================================
 * ui-starter · components.css
 * 通用组件样式 — 全部通过 tokens.css 的 CSS 变量取色
 * ============================================================= */

/* ---------- 布局容器 ---------- */
.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--sp-4);
}
.container.narrow { max-width: var(--max-w-narrow); }

/* ---------- 顶部 header / 标题 / 副标题 ---------- */
.header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
}
.header h1 { font-size: var(--fs-h1); font-weight: 600; }
.header h1 .g { color: var(--green); }
.header h1 .f { color: var(--purple); }

.subtitle { font-size: var(--fs-sub); color: var(--text2); }
.subtitle a { margin-left: var(--sp-2); }

.back { color: var(--accent); font-size: var(--fs-body); }
.back:hover { text-decoration: underline; }

/* ---------- 统计卡片栏（stats-bar） ---------- */
.stats-bar {
    display: flex; gap: var(--sp-3); flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 16px;
    min-width: 110px;
}
.stat-card .label {
    font-size: var(--fs-tiny); color: var(--text2);
    text-transform: uppercase; letter-spacing: 0.3px;
}
.stat-card .value { font-size: 20px; font-weight: 700; }
.stat-card .value.green { color: var(--green); }
.stat-card .value.purple { color: var(--purple); }
.stat-card .value.yellow { color: var(--yellow); }
.stat-card .value.red { color: var(--red); }
.stat-card .value.accent { color: var(--accent); }

/* ---------- 图例 / 说明行（legend） ---------- */
.legend {
    font-size: var(--fs-label);
    color: var(--text2);
    margin-bottom: var(--sp-3);
    padding: 10px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex; gap: var(--sp-6); flex-wrap: wrap;
}
.legend-group { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.legend-title { font-weight: 600; margin-right: var(--sp-1); }
.legend .g { color: var(--green); }
.legend .f { color: var(--purple); }

/* ---------- 筛选控件行（controls） ---------- */
.controls {
    display: flex; gap: 10px; flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--sp-4);
}
.controls input, .controls select {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    outline: none;
}
.controls input:focus, .controls select:focus { border-color: var(--accent); }
.controls input[type="text"] { flex: 1; min-width: 180px; }

/* ---------- 胶囊 tab（市场切换等） ---------- */
.pill-tabs { display: flex; gap: var(--sp-1); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.pill-tab {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text2);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-sub);
    cursor: pointer;
    user-select: none;
}
.pill-tab:hover { border-color: var(--accent); }
.pill-tab.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* ---------- 按钮 ---------- */
.btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 10px 28px;
    border-radius: var(--radius-md);
    font-size: var(--fs-h3);
    cursor: pointer;
    font-weight: 600;
}
.btn:hover { opacity: 0.85; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-sm { padding: 6px 14px; font-size: var(--fs-sub); font-weight: 500; }
.btn-ghost {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--accent); }
.btn-warn { background: var(--yellow); color: #000; }

.generate-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    cursor: pointer;
}
.generate-btn:hover { opacity: 0.85; }
.generate-btn:disabled { opacity: 0.5; cursor: wait; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sub); }
thead { position: sticky; top: 0; z-index: 10; }
th {
    background: var(--surface);
    color: var(--text2);
    padding: 8px 10px;
    text-align: left;
    font-weight: 500;
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}
td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
tr { cursor: pointer; }
tr:hover { background: var(--accent-bg); }

.number { text-align: right; font-variant-numeric: tabular-nums; }
.symbol { font-weight: 600; color: var(--accent); }
.company-name {
    color: var(--text2);
    font-size: var(--fs-tiny);
    display: block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.positive { color: var(--green); }
.negative { color: var(--red); }

/* ---------- 标签 / 徽章 ---------- */
.pass {
    background: var(--green-bg); color: var(--green);
    padding: 2px 6px; border-radius: var(--radius-sm); font-size: var(--fs-label);
}
.pass-f {
    background: var(--purple-bg); color: var(--purple);
    padding: 2px 6px; border-radius: var(--radius-sm); font-size: var(--fs-label);
}
.pass-y {
    background: var(--yellow-bg); color: var(--yellow);
    padding: 2px 6px; border-radius: var(--radius-sm); font-size: var(--fs-label);
}
.fail { color: var(--text2); font-size: var(--fs-label); }

.tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: var(--fs-tiny);
    font-weight: 600;
}
.tag-buy { background: var(--green-bg); color: var(--green); }
.tag-sell { background: var(--red-bg); color: var(--red); }
.tag-warn { background: var(--yellow-bg); color: var(--yellow); }

.sector-tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: var(--fs-tiny);
    background: var(--accent-bg);
    color: var(--accent);
}

/* ---------- 评分条（5 格绿 + 5 格紫 + 数字） ---------- */
.score-bar { display: flex; gap: 1px; align-items: center; justify-content: center; }
.score-bar .block {
    width: 8px; height: 14px;
    border-radius: 2px;
    border: 1px solid var(--border);
}
.score-bar .block.g { background: var(--green); border-color: var(--green); }
.score-bar .block.f { background: var(--purple); border-color: var(--purple); }
.score-bar .block.empty { background: transparent; }
.score-num { font-size: var(--fs-tiny); font-weight: 700; margin-left: var(--sp-1); }

/* ---------- 详情页评分卡（score-banner） ---------- */
.score-banner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-5);
}
.score-banner .total { text-align: center; margin-bottom: var(--sp-4); }
.score-banner .total .big { font-size: 48px; font-weight: 800; }
.score-banner .total .label { font-size: var(--fs-body); color: var(--text2); }

.score-sections { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.score-section h3 { font-size: var(--fs-body); margin-bottom: var(--sp-2); }
.score-section h3.g { color: var(--green); }
.score-section h3.f { color: var(--purple); }

.criteria { display: flex; flex-direction: column; gap: 6px; }
.criteria-item {
    font-size: var(--fs-sub);
    padding: 5px 10px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; gap: 6px;
}
.criteria-item.pass { background: var(--green-bg); color: var(--green); }
.criteria-item.pass-f { background: var(--purple-bg); color: var(--purple); }
.criteria-item.pass-y { background: var(--yellow-bg); color: var(--yellow); }
.criteria-item.fail { background: var(--red-bg); color: var(--red); }
.criteria-item .icon { font-size: 16px; }

/* ---------- 关键指标块（key-metrics / key-box） ---------- */
.key-metrics {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}
.key-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    text-align: center;
}
.key-box .label { font-size: var(--fs-label); color: var(--text2); }
.key-box .value { font-size: 28px; font-weight: 700; margin: 6px 0; }
.key-box .value.green { color: var(--green); }
.key-box .value.red { color: var(--red); }
.key-box .value.yellow { color: var(--yellow); }
.key-box .value.purple { color: var(--purple); }
.key-box .sub { font-size: var(--fs-label); color: var(--text2); }

/* ---------- 次要指标网格（metric-card） ---------- */
.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: var(--sp-6);
}
.metric-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-3);
}
.metric-card .label { font-size: var(--fs-tiny); color: var(--text2); margin-bottom: var(--sp-1); }
.metric-card .value { font-size: var(--fs-h2); font-weight: 600; }

/* ---------- 参数面板（backtest 等） ---------- */
.params {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.param-group { display: flex; flex-direction: column; gap: var(--sp-1); }
.param-group label { font-size: var(--fs-label); color: var(--text2); font-weight: 500; }
.param-group select,
.param-group input {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 8px 10px;
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    outline: none;
}
.param-group select:focus,
.param-group input:focus { border-color: var(--accent); }

/* ---------- 图表容器（Chart.js / ECharts 壳） ---------- */
.chart-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    margin-bottom: var(--sp-5);
}
.chart-container h3 { font-size: var(--fs-body); color: var(--text2); margin-bottom: 10px; }
.chart-container canvas { width: 100% !important; height: 300px !important; }

/* ---------- 可折叠明细卡（period-card） ---------- */
.period-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--sp-2);
    overflow: hidden;
}
.period-header {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 10px 16px;
    cursor: pointer;
    font-size: var(--fs-sub);
}
.period-header:hover { background: var(--accent-bg); }
.period-header .date { font-weight: 700; font-size: var(--fs-h3); }
.period-header .stat-label { color: var(--text2); font-size: var(--fs-tiny); }
.period-body { display: none; padding: 0 16px 12px; }
.period-body.open { display: block; }

.section-label {
    font-size: var(--fs-tiny);
    color: var(--text2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 10px 0 var(--sp-1);
    padding: var(--sp-1) 0;
    border-bottom: 1px dashed var(--border);
}

/* ---------- 分页 ---------- */
.pagination {
    display: flex; justify-content: center; align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    padding: var(--sp-4) 0;
}
.pagination button {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 6px 14px;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--fs-sub);
}
.pagination button:hover { border-color: var(--accent); }
.pagination button:disabled { opacity: 0.4; cursor: default; }
.pagination .page-info { color: var(--text2); font-size: var(--fs-sub); }

/* ---------- 登录卡 ---------- */
.login-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 40px;
    width: 360px;
    text-align: center;
    margin: 10vh auto 0;
}
.login-box h1 { font-size: var(--fs-h1); margin-bottom: var(--sp-2); }
.login-box .sub { font-size: var(--fs-sub); color: var(--text2); margin-bottom: 28px; }
.login-box input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 16px;
    outline: none;
    margin-bottom: 10px;
}
.login-box input:focus { border-color: var(--accent); }
.login-box button {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--fs-h3);
    cursor: pointer;
    margin-top: 6px;
    font-weight: 600;
}
.login-box button:hover { opacity: 0.85; }
.error { color: var(--red); font-size: var(--fs-body); margin-top: var(--sp-3); }

/* ---------- 加载态 ---------- */
.loading {
    text-align: center;
    padding: 60px;
    color: var(--text2);
}
.spinner {
    display: inline-block;
    width: 24px; height: 24px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty { text-align: center; padding: 40px; color: var(--text2); }

/* ---------- 分析正文（markdown 渲染区） ---------- */
.analysis-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    margin-top: var(--sp-6);
}
.analysis-section h2 {
    font-size: var(--fs-h2);
    margin-bottom: var(--sp-4);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.analysis-content { font-size: var(--fs-h3); line-height: 1.8; }
.analysis-content h2 { font-size: 17px; color: var(--accent); margin: 20px 0 10px; border: none; padding: 0; }
.analysis-content h3 { font-size: var(--fs-h3); color: var(--yellow); margin: 14px 0 8px; }
.analysis-content p { margin-bottom: 10px; }
.analysis-content ul,
.analysis-content ol { margin: 8px 0 12px 20px; }
.analysis-content table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.analysis-content th,
.analysis-content td {
    padding: 8px 12px; border: 1px solid var(--border); text-align: left;
}
.analysis-content th { background: var(--accent-bg); }
.analysis-content strong { color: var(--accent); }

/* ---------- K 线弹窗（与 kline_modal.html 配套） ---------- */
.kline-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999;
    display: none;
    align-items: center; justify-content: center;
}
.kline-modal-backdrop.open { display: flex; }
.kline-modal-box {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 92%; max-width: 980px;
    max-height: 88vh;
    overflow: auto;
    padding: var(--sp-4);
    position: relative;
}
.kline-modal-box .close {
    position: absolute; top: 10px; right: 14px;
    color: var(--text2); cursor: pointer; font-size: 22px;
    background: none; border: none;
}
.kline-modal-box .close:hover { color: var(--text); }
.kline-modal-box #kline-chart { width: 100%; height: 420px; }

/* ---------- 工具类 ---------- */
.muted { color: var(--text2); }
.accent { color: var(--accent); }
.green { color: var(--green); }
.red { color: var(--red); }
.yellow { color: var(--yellow); }
.purple { color: var(--purple); }
.hide { display: none !important; }

/* ---------- 响应式：移动端 ---------- */
@media (max-width: 768px) {
    .container { padding: 10px; }
    .header h1 { font-size: var(--fs-h2); }
    table { font-size: var(--fs-tiny); }
    td, th { padding: 6px 4px; }
    .company-name { max-width: 100px; }
    .hide-mobile { display: none; }
    .legend { flex-direction: column; gap: var(--sp-2); }
    .key-metrics { grid-template-columns: 1fr; }
    .score-sections { grid-template-columns: 1fr; }
    .key-box .value { font-size: 22px; }
    .params { grid-template-columns: 1fr 1fr; }
    .stats-bar .stat-card { flex: 1; min-width: 45%; }
}

@media (max-width: 480px) {
    .login-box { width: 94%; padding: 28px 20px; }
    .params { grid-template-columns: 1fr; }
}