/* ============================================================
 * 美股合约价差监控 · 紧凑版
 * ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Consolas, "SF Mono", monospace;
    background: #0d1117;
    color: #c9d1d9;
    font-size: 13px;
    line-height: 1.15;
}

/* ---------- 顶部 ---------- */
.top-bar {
    position: sticky; top: 0; z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px;
    background: #161b22;
    border-bottom: 1px solid #30363d;
}
.top-bar h1 { font-size: 14px; color: #f0f6fc; }
.top-bar h1 .sub { color: #8b949e; font-size: 12px; font-weight: normal; margin-left: 6px; }
.status-area { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #8b949e; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.ok { background: #3fb950; box-shadow: 0 0 6px #3fb950; }
.dot.err { background: #f85149; }
.rate-badge { background: #21262d; padding: 1px 6px; border-radius: 3px; color: #79c0ff; font-size: 12px; }

/* ---------- 筛选栏 ---------- */
.filter-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 5px 12px;
    background: #161b22;
    border-bottom: 1px solid #21262d;
    font-size: 12px;
    position: sticky; top: 32px; z-index: 6;
}
.filter-bar label { display: flex; align-items: center; gap: 4px; color: #c9d1d9; white-space: nowrap; }
.filter-bar input[type="checkbox"] { accent-color: #3fb950; }
.filter-bar input[type="number"] {
    background: #0d1117; border: 1px solid #30363d; border-radius: 3px;
    color: #c9d1d9; padding: 1px 4px; font-size: 12px;
}
.filter-bar select {
    background: #0d1117; border: 1px solid #30363d; border-radius: 3px;
    color: #c9d1d9; padding: 1px 4px; font-size: 12px;
}
.stat-info { margin-left: auto; color: #8b949e; font-size: 12px; }

/* ---------- 表格 ---------- */
.table-area { padding: 4px 8px; }
table {
    width: 100%; border-collapse: collapse; border-spacing: 0;
    font-family: "SF Mono", Consolas, monospace;
    font-size: 13px;
}
thead { position: sticky; top: 60px; z-index: 5; background: #161b22; }
th {
    padding: 5px 6px;
    font-size: 12px;
    font-weight: 600;
    color: #8b949e;
    text-align: right;
    border-bottom: 1px solid #30363d;
    white-space: nowrap;
    line-height: 1.1;
}
th:first-child { text-align: left; }
td {
    padding: 4px 6px;
    border-bottom: 1px solid #21262d;
    text-align: right;
    white-space: nowrap;
    line-height: 1.15;
}
td:first-child { text-align: left; font-weight: 600; color: #f0f6fc; }
tbody tr:hover { background: #1c2128; }

/* 价格 */
.price .bid { color: #3fb950; }
.price .ask { color: #f85149; }
.price .sep { color: #484f58; margin: 0 1px; }
.price .cur { font-size: 10px; color: #484f58; margin-top: 1px; display: block; }

/* 数值颜色 */
.pos { color: #3fb950; }
.neg { color: #f85149; }
.neu { color: #8b949e; }
.dim { color: #484f58; }

/* 方向标签 */
/* ---------- 置顶按钮 ---------- */
.pin-btn {
    background: none; border: none; cursor: pointer;
    font-size: 13px; padding: 0 2px; margin-right: 4px;
    opacity: 0.3; transition: opacity 0.15s; line-height: 1;
}
.pin-btn:hover { opacity: 1; }
.pin-btn.on { opacity: 1; }
tr.pinned { background: rgba(56,139,253,0.06) !important; }
tr.pinned:hover { background: rgba(56,139,253,0.12) !important; }

.tag { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 12px; }
.tag.pos { background: rgba(63,185,80,0.15); color: #3fb950; }
.tag.neu { background: #21262d; color: #484f58; }

/* 分红 */
.div-future { display: inline-flex; flex-direction: column; gap: 0; }
.div-soon { color: #f85149; font-weight: 700; display: inline-flex; flex-direction: column; gap: 0; }
.div-date { color: #d2a8ff; }
.div-amt { color: #79c0ff; }
.div-sub { font-size: 11px; color: #8b949e; }
.warn { color: #f59e0b; margin-left: 2px; }

/* 加载 */
.loading-cell { text-align: center; padding: 30px; color: #484f58; }
.hint { margin-top: 6px; font-size: 11px; color: #484f58; text-align: center; }