/* ============================================================
 * btmp_theme.css — BTMP Beta 全站共享主题层
 * 作用域：各共享顶栏页面在 head 引入；个人页颜色沿用此处变量
 * 两套共享配色：默认暖白、用户可选深夜石墨
 * ============================================================ */

:root {
    color-scheme: light;
    /* ---- 颜色 ---- */
    --btmp-bg: #f5f3ee;
    --btmp-surface: #fffefa;
    --btmp-surface-muted: #f0ede5;
    --btmp-line: #e6e2d8;
    --btmp-line-soft: #eeebe3;
    --btmp-text: #302f2a;
    --btmp-text-subtle: #5d5849;
    --btmp-text-muted: #706e65;
    --btmp-primary: #5d5849;
    --btmp-primary-soft: #f0ede5;
    --btmp-calendar-count: #68665e;
    --btmp-calendar-series: #b04b42;
    --btmp-calendar-theme: #536c85;
    --btmp-up: #bd4e43;
    --btmp-down: #3d7c59;
    --btmp-warn: #9d6c1b;
    --btmp-hot: #bd4e43;

    --btmp-favorite: #9d6c1b;
    --btmp-lhb-follow: #316998;
    --btmp-note: #faf6eb;
    --btmp-personal-frame: #fff;
    --btmp-focus: rgba(93, 88, 73, .16);
    --btmp-warn-soft: #fffbf1;
    --btmp-warn-line: #ebcb90;
    --btmp-up-soft: #fff0ed;
    --btmp-down-soft: #eef6ef;

    /* ---- 形状 ---- */
    --btmp-radius: 8px;
    --btmp-radius-lg: 9px;
    --btmp-radius-pill: 999px;
    --btmp-shadow: none;
    --btmp-shadow-soft: 0 1px 2px rgba(48, 47, 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;
}

:root[data-btmp-theme="graphite"] {
    color-scheme: dark;
    --btmp-bg: #191f26;
    --btmp-surface: #232c35;
    --btmp-surface-muted: #2d3944;
    --btmp-line: #3e4b58;
    --btmp-line-soft: #34414e;
    --btmp-text: #e7edf3;
    --btmp-text-subtle: #c4d0db;
    --btmp-text-muted: #a6b5c3;
    --btmp-primary: #a7c1d5;
    --btmp-primary-soft: #2d3944;
    --btmp-calendar-count: #bdc9d4;
    --btmp-calendar-series: #f28b82;
    --btmp-calendar-theme: #a7c1d5;
    --btmp-up: #f28b82;
    --btmp-down: #89c89c;
    --btmp-warn: #dfb66c;
    --btmp-hot: #f28b82;
    --btmp-favorite: #dfb66c;
    --btmp-lhb-follow: #8dc4ed;
    --btmp-note: #28333d;
    --btmp-personal-frame: #232c35;
    --btmp-focus: rgba(167, 193, 213, .22);
    --btmp-warn-soft: #39352d;
    --btmp-warn-line: #79633f;
    --btmp-up-soft: #422f32;
    --btmp-down-soft: #293d35;
}

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

a { color: var(--btmp-primary); }
input, select, textarea, button { color: inherit; }

/* ---- 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(48,47,42,0.06) 0%,
        rgba(48,47,42,0.10) 50%,
        rgba(48,47,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); }
}