/* ============================================================
 * btmp_theme.css — BTMP Beta 全站共享主题层
 * 作用域：被 index / calendar / lhb_calendar / details 等核心页引入
 * 设计目标：交易终端 Light，克制、清晰、占满屏宽、留白美观
 * ============================================================ */

:root {
    /* ---- 颜色 ---- */
    --btmp-bg: #f4f6f8;
    --btmp-surface: #ffffff;
    --btmp-surface-muted: #f8fafc;
    --btmp-line: #e5e7eb;
    --btmp-line-soft: #f1f5f9;
    --btmp-text: #111827;
    --btmp-text-subtle: #4b5563;
    --btmp-text-muted: #6b7280;
    --btmp-primary: #2563eb;
    --btmp-primary-soft: #e0ecff;
    --btmp-up: #dc2626;
    --btmp-down: #16a34a;
    --btmp-warn: #d97706;
    --btmp-hot: #e11d48;

    /* ---- 形状 ---- */
    --btmp-radius: 8px;
    --btmp-radius-lg: 10px;
    --btmp-radius-pill: 999px;
    --btmp-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    --btmp-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04);

    /* ---- 布局 ---- */
    --btmp-shell-max: 1400px;
    --btmp-shell-pad-x: clamp(16px, 2vw, 32px);
    --btmp-shell-pad-top: 16px;
    --btmp-shell-pad-bottom: 32px;
    --btmp-gap: 16px;
    --btmp-gap-sm: 12px;
}

/* ---- 全局 ---- */
html, body {
    background: var(--btmp-bg);
    color: var(--btmp-text);
}

/* ---- Page Shell：占满屏宽，但通过 max-width + padding 留白 ---- */
.btmp-shell {
    width: 100%;
    max-width: var(--btmp-shell-max);
    margin: 0 auto;
    padding: var(--btmp-shell-pad-top) var(--btmp-shell-pad-x) var(--btmp-shell-pad-bottom);
    box-sizing: border-box;
}

/* ---- 通用面板 ---- */
.btmp-panel {
    background: var(--btmp-surface);
    border: 1px solid var(--btmp-line);
    border-radius: var(--btmp-radius-lg);
    box-shadow: var(--btmp-shadow);
}

.btmp-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--btmp-line-soft);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--btmp-text);
}

.btmp-panel-body {
    padding: 12px 16px;
}

/* ---- 紧凑工作台页头：复盘页/详情页通用 ---- */
.btmp-page-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 0 4px;
}

.btmp-page-head h1 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--btmp-text);
    letter-spacing: -0.2px;
    margin: 0;
}

.btmp-page-head .btmp-page-subtitle {
    font-size: 0.85rem;
    color: var(--btmp-text-muted);
    font-weight: 400;
}

.btmp-page-head .btmp-page-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ---- 通用文字色辅助 ---- */
.btmp-muted { color: var(--btmp-text-muted); }
.btmp-up    { color: var(--btmp-up); }
.btmp-down  { color: var(--btmp-down); }

/* ---- Footer 弱化 ---- */
.btmp-footer {
    text-align: center;
    color: var(--btmp-text-muted);
    font-size: 0.75rem;
    padding: 16px 8px 8px;
    opacity: 0.7;
}

/* ---- Skeleton 加载占位（替代"加载中…"）---- */
.btmp-skeleton {
    display: block;
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        rgba(15,23,42,0.06) 0%,
        rgba(15,23,42,0.10) 50%,
        rgba(15,23,42,0.06) 100%
    );
    background-size: 200% 100%;
    animation: btmpSkeleton 1.4s ease-in-out infinite;
}
.btmp-skeleton + .btmp-skeleton { margin-top: 8px; }
.btmp-skeleton.w-60 { width: 60%; }
.btmp-skeleton.w-80 { width: 80%; }
.btmp-skeleton.w-40 { width: 40%; }
.btmp-skeleton.h-18 { height: 18px; }

@keyframes btmpSkeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---- 响应式：让顶栏 padding 与 shell 对齐 ---- */
@media (min-width: 1280px) {
    .btmp-topbar { padding: 0 var(--btmp-shell-pad-x); }
}