/*! A-04 · 社保缴费基数跨月差异定位 · 阶梯图（紫罗兰 × 变更点标线 × 分段条） */
.ml-a04 {
    --ml-page: #f6f4fb;
    --ml-card: #ffffff;
    --ml-card-2: #f9f7fd;
    --ml-ink: #1e1833;
    --ml-sub: #514a6b;
    --ml-faint: #8b83a3;
    --ml-line: #e6dff2;
    --ml-line-2: #f0ebf8;
    --ml-accent: #6742c4;
    --ml-accent-2: #a48ae0;
    --ml-accent-soft: #eee7fc;
    --ml-good: #12806a;
    --ml-good-soft: #e2f4ef;
    --ml-warn: #a46a10;
    --ml-warn-soft: #fbf0d8;
    --ml-bad: #bb3d58;
    --ml-bad-soft: #fbe8ee;
    --ml-font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    background:
        radial-gradient(760px 340px at 90% -6%, rgba(164, 138, 224, .16), transparent 60%),
        var(--ml-page);
}
:root[data-theme="dark"] .ml-a04 {
    --ml-page: #100d1b;
    --ml-card: #1a1628;
    --ml-card-2: #211c32;
    --ml-ink: #efeaff;
    --ml-sub: #c2b7dd;
    --ml-faint: #9187ac;
    --ml-line: #332a4b;
    --ml-line-2: #261f39;
    --ml-accent: #b49aff;
    --ml-accent-2: #8062d6;
    --ml-accent-soft: #2c2344;
    --ml-good-soft: #16332c;
    --ml-warn-soft: #382a13;
    --ml-bad-soft: #3a1e2a;
}
.ml-a04 .ml-hero { grid-template-columns: minmax(0, 1fr) minmax(390px, 500px); }
.ml-a04 h1.ml-h1 { letter-spacing: -.03em; }
.ml-a04 .a04-feat { display: grid; gap: 9px; margin-top: 4px; }
.ml-a04 .ml-feature i { background: var(--ml-accent); color: #fff; border-radius: 3px; }
.a04-notice { margin-top: 10px; padding: 10px 13px; border: 1px solid var(--ml-line); border-left: 3px solid var(--ml-accent); border-radius: 8px; background: var(--ml-card); font-size: 12px; color: var(--ml-sub); }

/* ---------- 首屏：规则表 + 录入台 ---------- */
.a04-console { background: var(--ml-card); border: 1px solid var(--ml-line); border-radius: 14px; box-shadow: var(--ml-shadow-lg); overflow: hidden; }
.a04-console-h { padding: 12px 16px; background: linear-gradient(105deg, var(--ml-accent), var(--ml-accent-2)); color: #fff; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.a04-console-h b { font-size: 13.5px; font-weight: 800; }
.a04-console-h span { font: 600 10.5px/1.4 var(--ml-font-num); opacity: .9; }
.a04-console-b { padding: 14px 16px 16px; }
.a04-rule-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.a04-rule-title b { font-size: 12.5px; }
.a04-rule-title small { font: 600 10.5px/1.4 var(--ml-font-num); color: var(--ml-faint); }
.a04-rates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.a04-rates .ml-label { font-size: 10.5px; margin-bottom: 3px; }
.a04-rates .ml-input { padding: 6px 7px; font: 700 12.5px/1.4 var(--ml-font-num); }
.a04-console .ml-textarea { min-height: 108px; margin-top: 11px; font-size: 12px; }
.a04-console .ml-drop { min-height: 48px; margin-top: 9px; }
.a04-console .ml-btn--primary { width: 100%; }
.a04-console .ml-btn-row .ml-btn { flex: 1; }

/* ---------- 阶梯图 ---------- */
.a04-chart { width: 100%; height: 230px; display: block; }
.a04-chart text { font: 11px var(--ml-font-num); fill: var(--ml-faint); }
.a04-chart .grid { stroke: var(--ml-line-2); }
.a04-chart .axis { stroke: var(--ml-line); }
.a04-chart .step { fill: none; stroke: var(--ml-accent); stroke-width: 2.8; }
.a04-chart .stated { fill: none; stroke: var(--ml-accent-2); stroke-width: 1.8; stroke-dasharray: 4 4; }
.a04-chart .change { stroke: var(--ml-bad); stroke-width: 1.5; stroke-dasharray: 4 4; }
.a04-chart .pt { fill: var(--ml-card); stroke: var(--ml-accent); stroke-width: 2; }
.a04-chart .pt.is-bad { fill: var(--ml-bad); stroke: var(--ml-bad); }
.a04-segments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.a04-seg { padding: 9px 13px; border: 1px solid var(--ml-line); border-bottom: 3px solid var(--ml-accent); border-radius: 7px; background: var(--ml-card-2); }
.a04-seg b { display: block; font: 800 15px/1.4 var(--ml-font-num); color: var(--ml-ink); }
.a04-seg span { font: 600 11px/1.5 var(--ml-font-num); color: var(--ml-faint); }
.a04-flags { display: grid; gap: 9px; }
.a04-flag { padding: 10px 12px; border-radius: 7px; border: 1px solid var(--ml-line); background: var(--ml-card-2); font-size: 12.5px; line-height: 1.7; }
.a04-flag.is-bad { border-left: 3px solid var(--ml-bad); background: var(--ml-bad-soft); }
.a04-flag.is-warn { border-left: 3px solid var(--ml-warn); background: var(--ml-warn-soft); }
@media (max-width: 900px) { .ml-a04 .ml-hero { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .a04-rates { grid-template-columns: repeat(3, 1fr); } }