/* ===== 23 · JD × 技能覆盖矩阵：数据工作台 · 琥珀 / 石墨 ===== */
.jm-page {
    --cg-accent: #9d6413;
    --cg-accent-2: #744708;
    --cg-accent-soft: #faf0dc;
    --cg-accent-ink: #ffffff;
    --jm-graphite: #2c3540;
    background:
        linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(157, 100, 19, .035) 100%) 0 0 / 34px 34px,
        var(--cg-bg);
}
:root[data-theme="dark"] .jm-page {
    --cg-accent: #f0bd68;
    --cg-accent-2: #ffd48f;
    --cg-accent-soft: rgba(240, 189, 104, .14);
    --cg-accent-ink: #2a1c06;
    --jm-graphite: #0f161d;
    background: linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(240, 189, 104, .03) 100%) 0 0 / 34px 34px, var(--cg-bg);
}

.jm-hero { padding: 24px 0 20px; }
.jm-lead { max-width: 900px; }
.jm-lead .cg-h1 em { background: linear-gradient(transparent 62%, var(--cg-accent-soft) 62%); }
.jm-hero-strip { display: flex; gap: 0; margin: 26px 0 18px; border: 1px solid var(--cg-line); border-radius: 12px; overflow: hidden; background: var(--cg-surface); }
.jm-hero-strip > div { flex: 1; display: flex; align-items: center; gap: 11px; padding: 12px 18px; border-right: 1px solid var(--cg-line); font-size: 13px; color: var(--cg-ink-2); }
.jm-hero-strip > div:last-child { border-right: 0; }
.jm-hero-strip b { font-size: 20px; color: var(--cg-accent); opacity: .8; }

.jm-workbench { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.jm-console .cg-console-h { background: var(--jm-graphite); }
:root[data-theme="dark"] .jm-console .cg-console-h { background: #080d12; }
.jm-jd-input { min-height: 168px; }
.jm-skill-input { min-height: 66px; }
.jm-drop { margin-bottom: 10px; padding: 12px; }
.jm-console .cg-console-b { padding: 16px 18px; }
.jm-console .cg-field { margin-bottom: 10px; }
.jm-dict { border: 1px solid var(--cg-line); border-radius: 10px; padding: 8px 11px; margin-bottom: 10px; background: var(--cg-surface-2); }
.jm-dict summary { cursor: pointer; font-size: 12.8px; font-weight: 700; color: var(--cg-ink); list-style: none; }
.jm-dict summary::-webkit-details-marker { display: none; }
.jm-dict summary::before { content: "▸ "; color: var(--cg-accent); }
.jm-dict[open] summary::before { content: "▾ "; }
.jm-dict summary span { font-weight: 500; color: var(--cg-muted); font-size: 11.5px; }
.jm-dict-input { min-height: 120px; margin: 9px 0; font-size: 12px; }

.jm-kpis .cg-kpi-value { color: var(--cg-accent); }
.jm-kpis .cg-kpi--ok .cg-kpi-value { color: var(--cg-ok); }
.jm-kpis .cg-kpi--warn .cg-kpi-value { color: var(--cg-warn); }

.jm-result { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; margin-top: 26px; align-items: start; }
.jm-matrix-card { min-width: 0; }
.jm-legend { padding: 12px 20px 0; }
.jm-scroll { max-height: 560px; }
.jm-table { min-width: 700px; border-collapse: separate; border-spacing: 0; }
.jm-table thead th { text-align: center; min-width: 74px; background: var(--cg-surface-2); }
.jm-table thead th:first-child { position: sticky; left: 0; z-index: 3; text-align: left; min-width: 176px; background: var(--cg-surface-2); }
.jm-table thead th.jm-col-gap { color: var(--cg-warn); }
.jm-table tbody td { padding: 6px 5px; text-align: center; }
.jm-table tbody td:first-child { position: sticky; left: 0; z-index: 1; background: var(--cg-surface); text-align: left; padding: 8px 12px; border-right: 1px solid var(--cg-line); }
.jm-table tbody tr:nth-child(even) td:first-child { background: var(--cg-surface-2); }
.jm-table tbody tr:hover td:first-child { background: var(--cg-accent-soft); }
.jm-jd-name { font-size: 12.5px; font-weight: 700; color: var(--cg-ink); display: block; }
.jm-jd-name small { display: block; font-weight: 500; font-size: 10.5px; color: var(--cg-faint); font-family: var(--cg-num); }
.jm-cell {
    display: block; min-width: 62px; height: 26px; border-radius: 6px;
    border: 1px solid var(--cg-line-soft); background: var(--cg-surface-2);
}
.jm-cell.is-hit { background: var(--cg-accent); border-color: var(--cg-accent); }
.jm-cell.is-gap { background: var(--cg-warn); border-color: var(--cg-warn); }
.jm-table tbody tr:hover .jm-cell:not(.is-hit):not(.is-gap) { background: var(--cg-accent-soft); }
.jm-row-hit { font-family: var(--cg-num); font-size: 11.5px; color: var(--cg-muted); }

.jm-side { display: grid; gap: 14px; }
.jm-side .cg-card + .cg-card { margin-top: 0; }
.jm-bars, .jm-gaps { display: grid; gap: 9px; max-height: 330px; overflow: auto; }
.jm-bar-row { font-size: 12px; }
.jm-bar-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: var(--cg-ink-2); }
.jm-bar-top b { color: var(--cg-ink); }
.jm-bar-top span { font-family: var(--cg-num); color: var(--cg-accent); }
.jm-bar .cg-bar { height: 6px; }
.jm-bar .cg-bar > i { background: var(--cg-accent); }
.jm-bar.is-mine .cg-bar > i { background: var(--cg-ok); }
.jm-gap-row { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 8px; background: var(--cg-surface-2); font-size: 12px; }
.jm-gap-row b { color: var(--cg-ink); flex: 1; }
.jm-gap-row .cg-badge { flex: none; }

@media print {
    .jm-workbench, .jm-hero-strip, .jm-side, .jm-legend { display: none !important; }
    .jm-result { display: block; }
    .jm-table { min-width: 0; }
    .jm-table thead th:first-child, .jm-table tbody td:first-child { position: static; }
}
@media (max-width: 1080px) {
    .jm-workbench, .jm-result { grid-template-columns: 1fr; }
    .jm-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .jm-hero { padding-top: 14px; }
    .jm-hero-strip { flex-direction: column; }
    .jm-hero-strip > div { border-right: 0; border-bottom: 1px solid var(--cg-line); padding: 9px 14px; }
    .jm-side { grid-template-columns: 1fr; }
    .jm-jd-input { min-height: 170px; }
}