/* ==========================================================================
   FAMILY LEDGER · F 组视觉体系 v1（51–60）
   --------------------------------------------------------------------------
   · 与 C 组「纸墨青绿」彻底不同的暖砂体系：米纸底、墨棕字、实边框、方角
   · 复用 cg-core.css 的组件语义，但重排版字体层级、圆角、边框与数字排版
   · 每页再由 fg-5X.css 定义单页强调色、首屏骨架与专属可视化
   · 主题仍由导航 #themeToggle 控制，深色为「暖墨」而非 C 组的冷墨
   ========================================================================== */
.cg-page.fg-page {
    --cg-bg: #f7f4ed;
    --cg-bg-2: #efebe1;
    --cg-surface: #fffdf9;
    --cg-surface-2: #faf7f0;
    --cg-surface-3: #f1ede3;
    --cg-ink: #20201c;
    --cg-ink-2: #4f4e46;
    --cg-muted: #7c7a70;
    --cg-faint: #a5a196;
    --cg-line: #e0dacb;
    --cg-line-soft: #ede8dc;
    --cg-shadow: 0 1px 1px rgba(60, 50, 30, .05), 0 8px 22px rgba(60, 50, 30, .045);
    --cg-shadow-lg: 0 18px 44px rgba(60, 50, 30, .13);
    --cg-ok: #2f6747;      --cg-ok-soft: #e6f0e5;
    --cg-warn: #96631c;    --cg-warn-soft: #f8eed6;
    --cg-bad: #a23c38;     --cg-bad-soft: #f8e5e2;
    --cg-info: #345f7a;    --cg-info-soft: #e4eef3;
    --cg-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", sans-serif;
    --cg-num: "Bahnschrift", "DIN Alternate", "SF Mono", ui-monospace, Consolas, Menlo, monospace;
    --cg-r: 12px;
    --cg-r-sm: 8px;
    font-size: 15px;
    line-height: 1.78;
    background-image: radial-gradient(rgba(120, 105, 70, .075) .7px, transparent .7px);
    background-size: 19px 19px;
}
:root[data-theme="dark"] .cg-page.fg-page {
    --cg-bg: #131310;
    --cg-bg-2: #1a1915;
    --cg-surface: #1c1b17;
    --cg-surface-2: #23221c;
    --cg-surface-3: #2a2821;
    --cg-ink: #f2ede1;
    --cg-ink-2: #cec8b8;
    --cg-muted: #a39d8d;
    --cg-faint: #7e786a;
    --cg-line: #37342b;
    --cg-line-soft: #2c2922;
    --cg-shadow: 0 1px 1px rgba(0, 0, 0, .35), 0 8px 22px rgba(0, 0, 0, .26);
    --cg-shadow-lg: 0 18px 44px rgba(0, 0, 0, .5);
    --cg-ok: #8fd3a4;      --cg-ok-soft: rgba(143, 211, 164, .12);
    --cg-warn: #e9bd74;    --cg-warn-soft: rgba(233, 189, 116, .12);
    --cg-bad: #f19a91;     --cg-bad-soft: rgba(241, 154, 145, .12);
    --cg-info: #8dc4e6;    --cg-info-soft: rgba(141, 196, 230, .12);
    background-image: radial-gradient(rgba(220, 205, 165, .05) .7px, transparent .7px);
}

/* ---------- 面包屑：方角小标签 ---------- */
.cg-page.fg-page .tsk-crumb-bar-in { padding: 20px 0 4px; }
.cg-page.fg-page .tsk-crumb a { border-radius: 5px; font-weight: 650; letter-spacing: .02em; }
.cg-page.fg-page .tsk-crumb-cur { border-radius: 5px; font-weight: 750; }

/* ---------- 排版层级：更紧的字距与更明确的主副标题 ---------- */
.cg-page.fg-page .cg-eyebrow {
    border-radius: 4px; letter-spacing: .12em; font-size: 10.5px; font-weight: 800;
    border: 1px solid var(--cg-line); background: var(--cg-surface); padding: 5px 11px;
}
.cg-page.fg-page .cg-eyebrow i { width: 5px; height: 5px; border-radius: 1px; }
.cg-page.fg-page .cg-h1 { font-size: clamp(30px, 3.7vw, 46px); font-weight: 840; letter-spacing: -.04em; line-height: 1.18; }
.cg-page.fg-page .cg-h1 span.cg-h1-lite { font-size: .43em; font-weight: 650; letter-spacing: .045em; margin-top: 15px; }
.cg-page.fg-page .cg-sub { font-size: 15.5px; line-height: 1.95; max-width: 66ch; }
.cg-page.fg-page .cg-h2 { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.cg-page.fg-page .cg-h3 { font-size: 15.5px; font-weight: 780; }
.cg-page.fg-page .cg-small { font-size: 12px; }
.cg-page.fg-page .cg-chip { border-radius: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; padding: 5px 10px; }
.cg-page.fg-page .cg-num { letter-spacing: .02em; }

/* ---------- 卡片：实边框、方角、浅阴影 ---------- */
.cg-page.fg-page .cg-card,
.cg-page.fg-page .cg-console,
.cg-page.fg-page .cg-kpi {
    border: 1px solid var(--cg-line);
    border-radius: var(--cg-r);
    box-shadow: var(--cg-shadow);
}
.cg-page.fg-page .cg-card-h {
    padding: 13px 18px;
    border-bottom: 1px solid var(--cg-line);
    background: var(--cg-surface-2);
    border-radius: var(--cg-r) var(--cg-r) 0 0;
}
.cg-page.fg-page .cg-console-h {
    border-radius: var(--cg-r) var(--cg-r) 0 0;
    font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.cg-page.fg-page .cg-console-note { font-size: 11.5px; border-radius: 0 0 var(--cg-r) var(--cg-r); }

/* ---------- 按钮：方角、实色、明确按压 ---------- */
.cg-page.fg-page .cg-btn {
    border-radius: 6px; font-weight: 750; letter-spacing: .01em;
    border: 1px solid var(--cg-line); background: var(--cg-surface); color: var(--cg-ink);
    padding: 9px 15px; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.cg-page.fg-page .cg-btn:hover { transform: translateY(-1px); box-shadow: var(--cg-shadow); }
.cg-page.fg-page .cg-btn:active { transform: translateY(0); }
.cg-page.fg-page .cg-btn--primary { background: var(--cg-accent); border-color: var(--cg-accent); color: var(--cg-accent-ink); }
.cg-page.fg-page .cg-btn--sm { padding: 6px 11px; font-size: 12px; }
.cg-page.fg-page .cg-btn--block { width: 100%; }

/* ---------- 表单 ---------- */
.cg-page.fg-page .cg-label { font-size: 12px; font-weight: 750; letter-spacing: .01em; }
.cg-page.fg-page .cg-input,
.cg-page.fg-page .cg-select,
.cg-page.fg-page .cg-textarea {
    border-radius: 6px; border: 1px solid var(--cg-line); background: var(--cg-surface);
    font-size: 13.5px; line-height: 1.7;
}
.cg-page.fg-page .cg-textarea { resize: vertical; }
.cg-page.fg-page .cg-drop { border-radius: 8px; border-style: dashed; border-width: 1.5px; }
.cg-page.fg-page .cg-req { font-weight: 800; }

/* ---------- KPI：左侧色条 ---------- */
.cg-page.fg-page .cg-kpis { gap: 12px; }
.cg-page.fg-page .cg-kpi { border-left: 4px solid var(--cg-accent); padding-left: 16px; }
.cg-page.fg-page .cg-kpi-label { font-size: 11.5px; letter-spacing: .05em; font-weight: 750; }
.cg-page.fg-page .cg-kpi-value { font-family: var(--cg-num); font-size: 33px; font-weight: 800; letter-spacing: -.02em; }
.cg-page.fg-page .cg-kpi-foot { font-size: 11px; }

/* ---------- 表格：大写小字距表头 ---------- */
.cg-page.fg-page .cg-table th {
    font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
    font-weight: 800; color: var(--cg-muted); background: var(--cg-surface-2);
    border-bottom: 1px solid var(--cg-line);
}
.cg-page.fg-page .cg-table td { font-size: 12.8px; border-bottom: 1px solid var(--cg-line-soft); }
.cg-page.fg-page .cg-table tbody tr:hover { background: var(--cg-accent-soft); }
.cg-page.fg-page .cg-t-num, .cg-page.fg-page .cg-t-src { font-family: var(--cg-num); }

/* ---------- 徽章与图例 ---------- */
.cg-page.fg-page .cg-badge { border-radius: 4px; font-size: 10.5px; font-weight: 780; letter-spacing: .01em; padding: 2px 7px; }
.cg-page.fg-page .cg-legend i { border-radius: 3px; }
.cg-page.fg-page .cg-actions { border-top: 1px solid var(--cg-line); background: var(--cg-surface-2); }

/* ---------- 说明卡 / FAQ ---------- */
.cg-page.fg-page .cg-note { border: 1px solid var(--cg-line); border-radius: 8px; background: var(--cg-surface); }
.cg-page.fg-page .cg-faq details { border: 1px solid var(--cg-line); border-radius: 8px; }
.cg-page.fg-page .cg-notice { border-radius: 8px; }
.cg-page.fg-page .cg-ai { border-radius: 8px; border-style: dashed; }

/* ---------- 弹窗：方角重边框 ---------- */
.cg-page.fg-page .cg-modal-box { border-radius: 12px; border: 1px solid var(--cg-line); box-shadow: var(--cg-shadow-lg); }
.cg-page.fg-page .cg-modal-h { border-radius: 12px 12px 0 0; }
.cg-page.fg-page .cg-toast { border-radius: 6px; }

/* ---------- 首屏价值卡：竖向色条 ---------- */
.cg-page.fg-page .cg-value {
    border-left: 3px solid var(--cg-accent); border-radius: 4px;
    background: var(--cg-surface); padding: 10px 13px;
    font-size: 11.8px; line-height: 1.7;
}
.cg-page.fg-page .cg-value b { display: block; font-size: 13px; letter-spacing: -.01em; }

/* 窄屏公共推荐位的既有溢出由 cg-core.css 的 :root.cg-c-page 作用域规则统一处理，
   F 组同样加载 cg-core.js，无需在此重复定义，也不影响线上其它页面。 */