/*! A-09 · 家庭固定扣款日归并与逐日余额 · 日历热力图（天青蓝 × 月历格 × 余额面积图） */
.ml-a09 {
    --ml-page: #f1f7fb;
    --ml-card: #ffffff;
    --ml-card-2: #f6fafd;
    --ml-ink: #102633;
    --ml-sub: #405d6c;
    --ml-faint: #7d97a5;
    --ml-line: #d9e8f0;
    --ml-line-2: #edf4f9;
    --ml-accent: #0e6f9e;
    --ml-accent-2: #58a9d0;
    --ml-accent-soft: #e1f1fa;
    --ml-good: #0b7a60;
    --ml-good-soft: #e1f4ed;
    --ml-warn: #9c6a12;
    --ml-warn-soft: #faf0d8;
    --ml-bad: #b33f42;
    --ml-bad-soft: #fae8e9;
    --ml-font-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    background:
        radial-gradient(900px 340px at 6% -8%, rgba(88, 169, 208, .18), transparent 62%),
        var(--ml-page);
}
:root[data-theme="dark"] .ml-a09 {
    --ml-page: #09161e;
    --ml-card: #12222d;
    --ml-card-2: #182c39;
    --ml-ink: #e6f3fa;
    --ml-sub: #aec8d5;
    --ml-faint: #7d9aaa;
    --ml-line: #24404f;
    --ml-line-2: #1a2f3c;
    --ml-accent: #6cc2ea;
    --ml-accent-2: #3d90ba;
    --ml-accent-soft: #1a3a4b;
    --ml-good-soft: #14342c;
    --ml-warn-soft: #382b13;
    --ml-bad-soft: #3a1e22;
}
.ml-a09 .ml-hero { grid-template-columns: minmax(0, 1fr) minmax(390px, 500px); }
.ml-a09 .a09-feat { display: grid; gap: 8px; margin-top: 4px; }
.ml-a09 .ml-feature i { background: var(--ml-accent); color: #fff; }

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

/* ---------- 月历 ---------- */
.a09-cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 5px; }
.a09-cal-head span { padding: 5px 0; text-align: center; font: 700 11px/1.4 var(--ml-font-num); color: var(--ml-faint); }
.a09-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.a09-cell { min-height: 76px; padding: 7px 6px; border: 1px solid var(--ml-line); border-radius: 7px; background: var(--ml-card-2); cursor: pointer; text-align: left; transition: transform .13s, border-color .13s; }
.a09-cell:hover { transform: translateY(-2px); border-color: var(--ml-accent); }
.a09-cell.is-blank { visibility: hidden; }
.a09-cell.is-weekend { background: var(--ml-line-2); }
.a09-cell.is-selected { outline: 2px solid var(--ml-accent); outline-offset: -2px; }
.a09-cell.is-low { border-color: var(--ml-bad); background: var(--ml-bad-soft); }
.a09-cell .d { display: flex; justify-content: space-between; font: 800 11.5px/1.4 var(--ml-font-num); color: var(--ml-ink); }
.a09-cell .out { display: block; margin-top: 5px; font: 700 12px/1.4 var(--ml-font-num); color: var(--ml-bad); }
.a09-cell .bal { display: block; font: 600 10.5px/1.5 var(--ml-font-num); color: var(--ml-faint); }
.a09-cell .in { display: inline-block; margin-top: 3px; padding: 0 5px; border-radius: 3px; background: var(--ml-good-soft); color: var(--ml-good); font: 700 10px/1.6 var(--ml-font-num); }
.a09-cell .dots { display: flex; gap: 3px; margin-top: 4px; }
.a09-cell .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ml-accent); }

/* ---------- 面积图 / 建议 ---------- */
.a09-chart { width: 100%; height: 200px; display: block; }
.a09-chart text { font: 10.5px var(--ml-font-num); fill: var(--ml-faint); }
.a09-chart .grid { stroke: var(--ml-line-2); }
.a09-chart .axis { stroke: var(--ml-line); }
.a09-chart .area { fill: var(--ml-accent-soft); }
.a09-chart .line { fill: none; stroke: var(--ml-accent); stroke-width: 2.4; }
.a09-chart .zero { stroke: var(--ml-bad); stroke-dasharray: 4 4; }
.a09-chart .low { fill: var(--ml-bad); }
.a09-callout { display: grid; gap: 9px; }
.a09-tip { padding: 11px 13px; border-left: 3px solid var(--ml-accent); border-radius: 6px; background: var(--ml-accent-soft); font-size: 12.5px; line-height: 1.8; }
.a09-tip.is-bad { border-left-color: var(--ml-bad); background: var(--ml-bad-soft); }
.a09-daylist { display: grid; gap: 7px; }
.a09-dayitem { display: flex; justify-content: space-between; gap: 8px; padding: 8px 11px; border: 1px solid var(--ml-line); border-radius: 6px; background: var(--ml-card-2); font-size: 12.5px; }
.a09-dayitem b { font-family: var(--ml-font-num); }
@media (max-width: 900px) { .ml-a09 .ml-hero { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .a09-params { grid-template-columns: repeat(3, 1fr); } .a09-cell { min-height: 62px; } }