/* =====================================================================
 * Excel 循环引用怎么找 · 独立页面皮肤（FORGE 设计系统之上）
 * 定位：公式审计工作台。首屏即上传，结果以「环清单 + 依赖图 + 单元格」三视图组织。
 * ===================================================================== */

/* ---------- 首屏：价值主张 + 上传入口同屏 ---------- */
.fg-hero { padding: 34px 0 30px; }
.fg-hero-grid { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: 40px; align-items: start; }
.fg-hero h1 { margin: 14px 0 14px; }
.fg-hero h1 .fg-hl { color: var(--fg-brand); }
.fg-hero .fg-lede { margin-bottom: 18px; }
.fg-kwline { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.fg-kwline .fg-tag { background: var(--fg-surface); }

/* 上传卡：首屏主操作区 */
.fg-upload { position: relative; padding: 20px; }
.fg-upload::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    border-radius: var(--fg-radius) var(--fg-radius) 0 0;
    background: linear-gradient(90deg, var(--fg-brand), var(--fg-amber) 62%, var(--fg-red)); }
.fg-drop { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1.5px dashed var(--fg-line-2);
    border-radius: var(--fg-radius-s); background: var(--fg-surface-2); cursor: pointer;
    transition: border-color .16s, background .16s, transform .16s; }
.fg-drop:hover, .fg-drop.is-over { border-color: var(--fg-brand); background: var(--fg-brand-soft); }
.fg-drop.is-over { transform: scale(1.005); }
.fg-drop-icon { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center;
    border-radius: 11px; background: var(--fg-brand-soft); color: var(--fg-brand); }
.fg-drop-title { font-size: 15px; font-weight: 700; color: var(--fg-ink); line-height: 1.5; }
.fg-drop-sub { font-size: 12.5px; color: var(--fg-ink-3); line-height: 1.6; }
.fg-filelist { margin-top: 12px; display: grid; gap: 7px; }
.fg-fileitem { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 8px;
    background: var(--fg-surface-2); border: 1px solid var(--fg-line); font-size: 12.5px; }
.fg-fileitem .fg-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; font-weight: 600; color: var(--fg-ink); font-family: var(--fg-mono); }
.fg-fileitem .fg-size { color: var(--fg-ink-3); font-variant-numeric: tabular-nums; }
.fg-fileitem .fg-state { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    background: var(--fg-slate-soft); color: var(--fg-ink-3); }
.fg-fileitem .fg-state.is-ok { background: var(--fg-brand-soft); color: var(--fg-brand-ink); }
.fg-fileitem .fg-state.is-err { background: var(--fg-red-soft); color: var(--fg-red); }
.fg-fileitem .fg-x { border: 0; background: transparent; color: var(--fg-ink-3); cursor: pointer;
    font-size: 16px; line-height: 1; padding: 0 2px; }
.fg-fileitem .fg-x:hover { color: var(--fg-red); }
.fg-opts { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--fg-line); }
.fg-opts-grid { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; }
.fg-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fg-actions .fg-primary-note { font-size: 12px; color: var(--fg-ink-3); }
.fg-progress { height: 4px; border-radius: 4px; background: var(--fg-surface-3); overflow: hidden; margin-top: 14px; }
.fg-progress span { display: block; height: 100%; width: 0; border-radius: 4px;
    background: linear-gradient(90deg, var(--fg-brand), var(--fg-amber)); transition: width .3s; }

/* 右侧：环路径示意（纯 SVG/CSS，零图片请求） */
.fg-visual { padding: 22px; }
.fg-visual-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.fg-visual-head h3 { font-size: 14px; }
.fg-diagram { width: 100%; height: auto; display: block; margin: 4px 0 8px; }
.fg-diagram .d-node { fill: var(--fg-surface); stroke: var(--fg-line-2); stroke-width: 1.4; }
.fg-diagram .d-node-hot { fill: var(--fg-red-soft); stroke: var(--fg-red); }
.fg-diagram .d-node-cool { fill: var(--fg-brand-soft); stroke: var(--fg-brand); }
.fg-diagram .d-txt { fill: var(--fg-ink); font-family: var(--fg-mono); font-size: 11px; font-weight: 700; }
.fg-diagram .d-sheet { fill: var(--fg-ink-3); font-family: var(--fg-sans); font-size: 10px; }
.fg-diagram .d-edge { stroke: var(--fg-red); stroke-width: 2; fill: none; marker-end: url(#fgArrow); }
.fg-diagram .d-edge-2 { stroke: var(--fg-amber); stroke-dasharray: 5 4; }
.fg-diagram .d-panel { fill: var(--fg-surface-2); stroke: var(--fg-line); }
.fg-steps { display: grid; gap: 10px; margin-top: 14px; }
.fg-step { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.65; color: var(--fg-ink-2); }
.fg-step-n { flex: 0 0 21px; height: 21px; border-radius: 6px; display: grid; place-items: center;
    background: var(--fg-brand-soft); color: var(--fg-brand-ink); font-size: 11px; font-weight: 800;
    font-variant-numeric: tabular-nums; }

/* ---------- 结果区 ---------- */
.fg-result-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; margin-bottom: 18px; }
.fg-result-head h2 { margin-bottom: 5px; }
.fg-file-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
    background: var(--fg-surface); border: 1px solid var(--fg-line); font-size: 12.5px;
    font-family: var(--fg-mono); color: var(--fg-ink-2); max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.fg-page #fgResult.is-collapsed .fg-wrap > :not(.fg-result-head) { display: none !important; }
.fg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.fg-stat { position: relative; padding: 16px 16px 14px; overflow: hidden; }
.fg-stat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: var(--fg-line); }
.fg-stat.is-alert::after { background: linear-gradient(90deg, var(--fg-red), var(--fg-orange)); }
.fg-stat.is-good::after { background: linear-gradient(90deg, var(--fg-brand), #7fd1a8); }
.fg-stat-label { font-size: 12px; color: var(--fg-ink-3); line-height: 1.5; }
.fg-stat-value { font-size: clamp(24px, 3vw, 32px); font-weight: 750; line-height: 1.25;
    letter-spacing: -.03em; margin: 3px 0 2px; font-variant-numeric: tabular-nums; }
.fg-stat.is-alert .fg-stat-value { color: var(--fg-red); }
.fg-stat.is-good .fg-stat-value { color: var(--fg-brand); }
.fg-stat-note { font-size: 11.5px; color: var(--fg-ink-3); line-height: 1.5; }
.fg-warns { display: grid; gap: 8px; margin-bottom: 16px; }

/* Tabs */
.fg-tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--fg-line); margin-bottom: 16px; }
.fg-tab { appearance: none; border: 0; background: transparent; padding: 10px 15px; cursor: pointer;
    font-size: 13.5px; font-weight: 650; color: var(--fg-ink-3); border-bottom: 2px solid transparent;
    margin-bottom: -1px; line-height: 1.5; }
.fg-tab:hover { color: var(--fg-brand); }
.fg-tab.is-on { color: var(--fg-brand); border-bottom-color: var(--fg-brand); }
.fg-tab .fg-tab-n { font-size: 11px; margin-left: 5px; padding: 1px 6px; border-radius: 999px;
    background: var(--fg-surface-3); color: var(--fg-ink-3); font-variant-numeric: tabular-nums; }
.fg-tab.is-on .fg-tab-n { background: var(--fg-brand-soft); color: var(--fg-brand-ink); }
.fg-pane { min-height: 220px; }

/* 环清单 */
.fg-filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.fg-filterbar .fg-input { width: auto; flex: 1 1 210px; min-width: 160px; }
.fg-cycles { display: grid; gap: 12px; }
.fg-cycle { position: relative; overflow: hidden; padding-left: 6px; }
.fg-cycle::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--fg-slate); }
.fg-cycle.sev-high::before { background: var(--fg-red); }
.fg-cycle.sev-medium::before { background: var(--fg-orange); }
.fg-cycle.sev-low::before { background: var(--fg-slate); }
.fg-cycle-head { display: flex; align-items: flex-start; gap: 12px; padding: 15px 17px 13px 19px; }
.fg-cycle-id { flex: 0 0 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
    background: var(--fg-surface-3); font-family: var(--fg-mono); font-size: 13px; font-weight: 800;
    color: var(--fg-ink-2); font-variant-numeric: tabular-nums; }
.fg-cycle-main { flex: 1; min-width: 0; }
.fg-cycle-title { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 7px; }
.fg-cycle-title h3 { font-size: 14.5px; }
.fg-path { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.fg-path-node { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 8px; border-radius: 6px;
    background: var(--fg-surface-3); border: 1px solid var(--fg-line); font-family: var(--fg-mono);
    font-size: 11.5px; color: var(--fg-ink); white-space: nowrap; }
.fg-path-node em { font-style: normal; font-family: var(--fg-sans); font-size: 10px; color: var(--fg-ink-3); }
.fg-path-arrow { color: var(--fg-amber); font-size: 13px; font-weight: 800; }
.fg-cycle-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.fg-cycle-body { border-top: 1px solid var(--fg-line); padding: 15px 17px 17px 19px; background: var(--fg-surface-2); }
.fg-block { margin-bottom: 15px; }
.fg-block:last-child { margin-bottom: 0; }
.fg-block-title { font-size: 12px; font-weight: 700; color: var(--fg-ink-3); letter-spacing: .05em;
    margin-bottom: 7px; }
.fg-formulas { display: grid; gap: 7px; }
.fg-formula { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 10px; align-items: start; }
.fg-formula-cell { font-family: var(--fg-mono); font-size: 11.5px; color: var(--fg-brand-ink);
    padding-top: 9px; word-break: break-all; }
.fg-cells { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-copybar { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }

/* 依赖图 */
.fg-graph-card { padding: 18px; }
.fg-graph-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap; margin-bottom: 12px; }
.fg-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--fg-ink-2); }
.fg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.fg-dot-cycle { background: var(--fg-red); }
.fg-dot-normal { background: var(--fg-slate); }
.fg-line-swatch { width: 18px; height: 0; border-top: 2px solid var(--fg-red); display: inline-block; }
.fg-line-dash { border-top-style: dashed; border-color: var(--fg-amber); }
.fg-graph { width: 100%; height: 440px; border-radius: var(--fg-radius-s); background: var(--fg-surface-2);
    border: 1px solid var(--fg-line); }
.fg-graph-note { margin-top: 10px; font-size: 12px; color: var(--fg-ink-3); line-height: 1.7; }

/* 单元格表 / 筛选 */
.fg-tabletools { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.fg-tabletools .fg-input { width: auto; flex: 1 1 200px; }
.fg-th-sort { cursor: pointer; user-select: none; }
.fg-th-sort:hover { color: var(--fg-brand); }
.fg-th-sort::after { content: "↕"; margin-left: 5px; opacity: .45; font-size: 11px; }
.fg-th-sort.is-asc::after { content: "↑"; opacity: 1; color: var(--fg-brand); }
.fg-th-sort.is-desc::after { content: "↓"; opacity: 1; color: var(--fg-brand); }

/* 导出 / AI */
.fg-export-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fg-export-item { padding: 16px; }
.fg-export-item h3 { font-size: 14px; margin-bottom: 5px; }
.fg-export-item p { font-size: 12.5px; color: var(--fg-ink-3); line-height: 1.7; margin-bottom: 12px; }
.fg-ai-card { margin-top: 16px; padding: 18px; border: 1px solid var(--fg-amber);
    background: linear-gradient(135deg, var(--fg-amber-soft), var(--fg-surface) 62%); }
:root[data-theme="dark"] .fg-ai-card { background: var(--fg-surface); }
.fg-ai-card h3 { font-size: 15px; margin-bottom: 6px; }
.fg-ai-card p { font-size: 13px; color: var(--fg-ink-2); line-height: 1.75; margin-bottom: 12px; }
.fg-ai-out { margin-top: 14px; padding: 14px 16px; border-radius: var(--fg-radius-s);
    background: var(--fg-surface); border: 1px solid var(--fg-line); font-size: 13.5px;
    line-height: 1.85; white-space: pre-wrap; word-break: break-word; }

/* 批量汇总 */
.fg-batch { margin-top: 16px; }

/* ---------- 说明 / SEO 正文 ---------- */
.fg-prose { font-size: 14.5px; line-height: 1.95; color: var(--fg-ink-2); }
.fg-prose h2 { margin-bottom: 12px; }
.fg-prose h3 { margin: 22px 0 8px; font-size: 15.5px; }
.fg-prose p { margin-bottom: 13px; max-width: 88ch; }
.fg-prose ul { margin: 0 0 14px; padding-left: 22px; }
.fg-prose li { margin-bottom: 8px; }
.fg-prose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; }
.fg-faq { border-top: 1px solid var(--fg-line); padding: 15px 0; }
.fg-faq:last-child { border-bottom: 1px solid var(--fg-line); }
.fg-faq h3 { font-size: 14.5px; margin-bottom: 6px; }
.fg-faq p { font-size: 13.5px; color: var(--fg-ink-2); line-height: 1.85; max-width: 88ch; }
.fg-footnote { padding: 20px 0 46px; font-size: 12px; color: var(--fg-ink-3); line-height: 1.8; }

@media (max-width: 980px) {
    .fg-hero-grid { grid-template-columns: 1fr; gap: 22px; }
    .fg-visual { order: 2; }
    .fg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .fg-hero { padding: 22px 0 20px; }
    .fg-hero-grid { gap: 18px; }
    .fg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .fg-stat { padding: 13px 12px 11px; }
    .fg-export-grid, .fg-prose-grid, .fg-opts-grid { grid-template-columns: 1fr; }
    .fg-cycle-head { flex-wrap: wrap; }
    .fg-cycle-tools { width: 100%; }
    .fg-formula { grid-template-columns: 1fr; gap: 2px; }
    .fg-formula-cell { padding-top: 0; }
    .fg-graph { height: 340px; }
    .fg-drop { padding: 14px; gap: 12px; }
}