/* =====================================================================
 * Excel 外部链接与断链排查 · 独立皮肤（LINK INSPECTOR）
 * ---------------------------------------------------------------------
 * 深海蓝 + 风险红/琥珀的安全审计风；顶部安全边界横幅、横向上传条、
 * 风险概览、链接卡片清单、引用/断链双表。与前两个工具布局完全不同。
 * 深色模式由导航 theme-toggle.js 驱动，本页不新增主题控件。
 * ===================================================================== */

.el-page {
    --fg-bg: #f2f6f8;
    --fg-bg-grad: linear-gradient(180deg, #eaf2f7 0%, #f2f6f8 340px);
    --fg-surface: #ffffff;
    --fg-surface-2: #f7fafb;
    --fg-surface-3: #eaf1f5;
    --fg-ink: #14232e;
    --fg-ink-2: #425867;
    --fg-ink-3: #748897;
    --fg-line: #dde7ec;
    --fg-line-2: #c3d3dc;
    --fg-brand: #0c4a6e;
    --fg-brand-2: #075985;
    --fg-brand-soft: #e2f1f8;
    --fg-brand-ink: #0b4a6f;
    --fg-amber: #b45309;
    --fg-amber-soft: #fff3e3;
    --fg-red: #b91c1c;
    --fg-red-soft: #fdecec;
    --fg-orange: #c2410c;
    --fg-orange-soft: #fff0e6;
    --fg-green: #15803d;
    --fg-green-soft: #e8f6ed;
    --fg-slate: #64748b;
    --fg-slate-soft: #edf1f4;
    --fg-shadow: 0 1px 2px rgba(20, 35, 46, .06), 0 10px 28px rgba(20, 35, 46, .07);
    --fg-shadow-lg: 0 20px 52px rgba(20, 35, 46, .15);
    --fg-radius: 13px;
    --fg-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --fg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 15px;
    line-height: 1.8;
}

:root[data-theme="dark"] .el-page {
    --fg-bg: #0a1118;
    --fg-bg-grad: linear-gradient(180deg, #0d1a24 0%, #0a1118 340px);
    --fg-surface: #141e28;
    --fg-surface-2: #19242f;
    --fg-surface-3: #1f2d3a;
    --fg-ink: #e9f1f6;
    --fg-ink-2: #b3c4d0;
    --fg-ink-3: #8296a5;
    --fg-line: #263846;
    --fg-line-2: #34495a;
    --fg-brand: #7dd3fc;
    --fg-brand-2: #bae6fd;
    --fg-brand-soft: rgba(125, 211, 252, .13);
    --fg-brand-ink: #bae6fd;
    --fg-amber: #fcd34d;
    --fg-amber-soft: rgba(252, 211, 77, .12);
    --fg-red: #fca5a5;
    --fg-red-soft: rgba(252, 165, 165, .12);
    --fg-orange: #fdba74;
    --fg-orange-soft: rgba(253, 186, 116, .12);
    --fg-green: #86efac;
    --fg-green-soft: rgba(134, 239, 172, .12);
    --fg-slate: #9aabba;
    --fg-slate-soft: #1f2d3a;
    --fg-shadow: 0 1px 2px rgba(0, 0, 0, .34), 0 10px 28px rgba(0, 0, 0, .30);
    --fg-shadow-lg: 0 20px 52px rgba(0, 0, 0, .46);
}

.el-page h1 { letter-spacing: -.022em; }
.el-page strong { color: var(--fg-brand-ink); }

/* ---------- 顶部安全边界横幅 ---------- */
.el-safety { margin: 22px 0 0; border-radius: var(--fg-radius); padding: 15px 20px;
    background: linear-gradient(100deg, #0c4a6e, #075985 62%, #0e7490);
    color: #eaf6fc; box-shadow: var(--fg-shadow); }
:root[data-theme="dark"] .el-safety { background: linear-gradient(100deg, #102b3c, #123c52 62%, #134e63); }
.el-safety-head { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 750; margin-bottom: 8px; }
.el-safety-head svg { flex: none; }
.el-safety-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 22px; }
.el-safety-item { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.65; color: #d7ecf6; }
.el-safety-item b { color: #fff; }
.el-safety-item::before { content: "✓"; flex: none; font-weight: 800; color: #7dd3fc; }
.el-safety-warn { margin-top: 9px; padding-top: 9px; border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: 12.5px; line-height: 1.7; color: #ffe4c7; }

/* ---------- 首屏标题 ---------- */
.el-hero { padding: 26px 0 18px; }
.el-hero h1 { margin: 12px 0 10px; }
.el-hero h1 .el-hl { color: var(--fg-brand); }
.el-hero .fg-lede { max-width: 74ch; }
.el-kws { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.el-kws .fg-tag { background: var(--fg-surface); font-size: 11.5px; }

/* ---------- 横向上传条（左上传 + 右参数） ---------- */
.el-upload-row { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; }
.el-upload, .el-params { padding: 20px; }
.el-card-title { font-size: 13px; font-weight: 750; color: var(--fg-ink-2); letter-spacing: .04em;
    text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.el-card-title::before { content: ""; width: 4px; height: 14px; border-radius: 3px; background: var(--fg-brand); }
.el-drop { display: flex; align-items: center; gap: 15px; padding: 20px; cursor: pointer;
    border: 2px dashed var(--fg-line-2); border-radius: 11px; background: var(--fg-surface-2);
    transition: border-color .16s, background .16s; }
.el-drop:hover, .el-drop.is-over { border-color: var(--fg-brand); background: var(--fg-brand-soft); }
.el-drop-ico { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: var(--fg-brand-soft); color: var(--fg-brand); }
.el-drop-title { font-size: 15px; font-weight: 750; color: var(--fg-ink); line-height: 1.5; }
.el-drop-sub { font-size: 12px; color: var(--fg-ink-3); line-height: 1.6; }
.el-filelist { display: grid; gap: 6px; margin-top: 11px; }
.el-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: 12px; }
.el-fileitem .el-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 650; font-family: var(--fg-mono); color: var(--fg-ink); }
.el-fileitem .el-state { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700;
    background: var(--fg-slate-soft); color: var(--fg-ink-3); }
.el-fileitem .el-state.is-ok { background: var(--fg-green-soft); color: var(--fg-green); }
.el-fileitem .el-state.is-err { background: var(--fg-red-soft); color: var(--fg-red); }
.el-fileitem .el-x { border: 0; background: transparent; color: var(--fg-ink-3); cursor: pointer; font-size: 16px; line-height: 1; }
.el-fileitem .el-x:hover { color: var(--fg-red); }
.el-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 16px; }
.el-note { font-size: 11.5px; color: var(--fg-ink-3); }
.el-progress { height: 4px; border-radius: 4px; background: var(--fg-surface-3); overflow: hidden; margin-top: 12px; }
.el-progress span { display: block; height: 100%; width: 0; border-radius: 4px;
    background: linear-gradient(90deg, var(--fg-brand), var(--fg-orange)); transition: width .3s; }
.el-limits { margin-top: 14px; padding: 10px 12px; border-radius: 9px; background: var(--fg-surface-2);
    border: 1px solid var(--fg-line); font-size: 12px; color: var(--fg-ink-3); line-height: 1.7; }
.el-limits b { color: var(--fg-ink-2); font-variant-numeric: tabular-nums; }

/* ---------- 四步流程 ---------- */
.el-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.el-step { padding: 12px 14px; border-radius: 10px; background: var(--fg-surface);
    border: 1px solid var(--fg-line); box-shadow: var(--fg-shadow); }
.el-step-n { font-family: var(--fg-mono); font-size: 11px; font-weight: 800; color: var(--fg-brand); }
.el-step b { display: block; font-size: 13px; color: var(--fg-ink); margin: 2px 0 3px; }
.el-step p { font-size: 11.5px; line-height: 1.65; color: var(--fg-ink-3); margin: 0; }

/* ---------- 结果：风险概览 ---------- */
.el-result { padding: 8px 0 26px; }
.el-result-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.el-result-head h2 { font-size: 22px; margin-bottom: 4px; }
.el-file-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
    background: var(--fg-surface); border: 1px solid var(--fg-line); font-family: var(--fg-mono);
    font-size: 12px; color: var(--fg-ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.el-overview { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 12px; margin-bottom: 14px; }
.el-risk-hero { padding: 18px; display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(150deg, var(--fg-brand), #0e7490); color: #fff; border-radius: var(--fg-radius); }
:root[data-theme="dark"] .el-risk-hero { background: linear-gradient(150deg, #123c52, #155e75); }
.el-risk-hero small { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.el-risk-hero b { font-size: 38px; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.el-risk-hero span { font-size: 12.5px; line-height: 1.65; opacity: .92; }
.el-risk-hero.is-danger { background: linear-gradient(150deg, #991b1b, #b91c1c); }
.el-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.el-stat { padding: 12px 13px; border-radius: 10px; background: var(--fg-surface);
    border: 1px solid var(--fg-line); box-shadow: var(--fg-shadow); }
.el-stat b { display: block; font-size: 21px; font-weight: 780; color: var(--fg-brand-ink);
    font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.3; }
.el-stat.is-alert b { color: var(--fg-red); }
.el-stat.is-warn b { color: var(--fg-orange); }
.el-stat span { font-size: 11.5px; color: var(--fg-ink-3); }
.el-warns { display: grid; gap: 8px; margin-bottom: 14px; }

/* ---------- 链接卡片 ---------- */
.el-section-title { display: flex; align-items: baseline; gap: 10px; margin: 24px 0 12px; }
.el-section-title h2 { font-size: 18px; }
.el-section-title span { font-size: 12.5px; color: var(--fg-ink-3); }
.el-links { display: grid; gap: 11px; }
.el-link { position: relative; overflow: hidden; padding-left: 6px; }
.el-link::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--fg-slate); }
.el-link.risk-high::before { background: var(--fg-red); }
.el-link.risk-medium::before { background: var(--fg-orange); }
.el-link.risk-low::before { background: var(--fg-green); }
.el-link-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 12px 18px; }
.el-link-idx { flex: 0 0 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
    background: var(--fg-surface-3); font-family: var(--fg-mono); font-size: 12px; font-weight: 800; color: var(--fg-ink-2); }
.el-link-main { flex: 1; min-width: 0; }
.el-link-title { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 6px; }
.el-link-title h3 { font-size: 14px; font-family: var(--fg-mono); word-break: break-all; }
.el-path { display: block; margin-top: 7px; padding: 8px 11px; border-radius: 7px; background: var(--fg-surface-3);
    font-family: var(--fg-mono); font-size: 11.5px; line-height: 1.65; color: var(--fg-ink-2);
    word-break: break-all; }
.el-link-tools { display: flex; flex-direction: column; gap: 6px; }
.el-link-body { border-top: 1px solid var(--fg-line); padding: 14px 16px 16px 18px; background: var(--fg-surface-2); }
.el-kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 5px 12px; font-size: 12.5px; line-height: 1.7; }
.el-kv dt { color: var(--fg-ink-3); }
.el-kv dd { margin: 0; color: var(--fg-ink-2); word-break: break-all; }
.el-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.el-suggestion { margin-top: 12px; padding: 11px 13px; border-radius: 9px;
    background: var(--fg-amber-soft); color: var(--fg-ink-2); font-size: 12.5px; line-height: 1.8; }

/* ---------- 引用 / 断链双表 ---------- */
.el-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.el-table-card { padding: 0; overflow: hidden; }
.el-table-head { padding: 12px 15px; border-bottom: 1px solid var(--fg-line); display: flex;
    justify-content: space-between; align-items: center; gap: 8px; }
.el-table-head h3 { font-size: 13.5px; }
.el-scroll { max-height: 340px; overflow: auto; overscroll-behavior: contain; }
.el-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.el-table th, .el-table td { padding: 8px 11px; text-align: left; border-bottom: 1px solid var(--fg-line); vertical-align: top; }
.el-table th { background: var(--fg-surface-2); color: var(--fg-ink-3); font-size: 11px; font-weight: 700; white-space: nowrap; }
.el-table td.el-mono { font-family: var(--fg-mono); font-size: 11px; word-break: break-all; }
.el-table tbody tr:hover { background: var(--fg-surface-2); }

/* ---------- 处置建议 / 导出 / 批量 ---------- */
.el-recs { display: grid; gap: 8px; }
.el-rec { display: flex; gap: 11px; padding: 12px 15px; border-radius: 10px;
    background: var(--fg-surface); border: 1px solid var(--fg-line); font-size: 13px; line-height: 1.8; }
.el-rec-n { flex: 0 0 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
    background: var(--fg-brand-soft); color: var(--fg-brand-ink); font-size: 11px; font-weight: 800; }
.el-export-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.el-export { padding: 16px; border-top: 3px solid var(--fg-brand); }
.el-export.is-refs { border-top-color: var(--fg-orange); }
.el-export h3 { font-size: 14px; margin-bottom: 5px; }
.el-export p { font-size: 12.5px; color: var(--fg-ink-2); line-height: 1.75; margin-bottom: 12px; }
.el-batch { margin-top: 14px; padding: 15px; }
.el-batch h3 { font-size: 14px; margin-bottom: 9px; }

/* ---------- 说明正文（与公共底部套件衔接） ---------- */
.el-prose { font-size: 14.5px; line-height: 1.95; color: var(--fg-ink-2); padding: 8px 0 22px; }
.el-prose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 36px; }
.el-prose h2 { font-size: 20px; margin-bottom: 11px; }
.el-prose h3 { font-size: 15px; margin: 18px 0 7px; }
.el-prose p { margin-bottom: 12px; max-width: 88ch; }
.el-prose ul { padding-left: 21px; margin-bottom: 13px; }
.el-prose li { margin-bottom: 7px; }
.el-footnote { padding-bottom: 32px; font-size: 12px; color: var(--fg-ink-3); line-height: 1.8; }

@media (max-width: 980px) {
    .el-upload-row, .el-overview, .el-tables, .el-prose-grid { grid-template-columns: 1fr; }
    .el-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .el-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .el-safety-grid, .el-steps, .el-export-grid { grid-template-columns: 1fr; }
    .el-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .el-link-head { flex-wrap: wrap; }
    .el-link-tools { flex-direction: row; width: 100%; }
    .el-kv { grid-template-columns: 78px minmax(0, 1fr); }
}