/* ============================================================
 * fin-baby.css —— 奶粉 / 尿布用量与花费计算器设计系统（「奶油莓果」风格）
 * 依赖 fin.css 的全部组件（.fin-card / .fin-table / .fin-kpi / .fin-tabs…）
 * 仅通过 .fin.baby 作用域覆写设计变量与 Hero，结构、JS 与 fin-common.js 完全复用
 * 与既有主题刻意区分：默认 fin 绿 / tax 政务靛蓝 / leave 暖沙金·海青
 *   baby = 奶油底 + 莓果粉主色 + 奶蓝点缀，圆润柔软、母婴亲和
 * 亮色 / 黑夜双主题：<html data-theme="dark"> 自动切换
 * ============================================================ */

/* ---------- 亮色（奶油莓果） ---------- */
.fin.baby {
    --fin-bg: #fff6f8;
    --fin-ink: #402b33;
    --fin-ink-soft: #7a5c67;
    --fin-faint: #b597a2;
    --fin-card: #ffffff;
    --fin-card-2: #fff0f4;
    --fin-line: #f7e2e9;
    --fin-line-strong: #ecc8d5;
    --fin-accent: #e5598c;
    --fin-accent-2: #f27da6;
    --fin-gold: #4b8fc4;
    --fin-gold-soft: #e8f2fa;
    --fin-accent-soft: #fde8f0;
    --fin-accent-ink: #c93e72;
    --fin-grad: linear-gradient(135deg, #e5598c 0%, #f27da6 48%, #f7a6c2 100%);
    --fin-hero-grad: linear-gradient(135deg, #c93e72 0%, #e5598c 48%, #5a9ccb 132%);
    --fin-danger: #d9534d;
    --fin-danger-soft: #fdeceb;
    --fin-warn: #cf9426;
    --fin-warn-soft: #fdf5e2;
    --fin-input-bg: #fffafb;
    --fin-track: #f5dde7;
    --fin-shadow: 0 18px 50px -24px rgba(201, 62, 114, .32);
    --fin-shadow-soft: 0 8px 24px -14px rgba(201, 62, 114, .26);
    color-scheme: light;
}

/* ---------- 黑夜（深夜奶屋） ---------- */
:root[data-theme="dark"] .fin.baby {
    --fin-bg: #1c1318;
    --fin-ink: #f8e9ef;
    --fin-ink-soft: #d2b6c2;
    --fin-faint: #98798a;
    --fin-card: #291d23;
    --fin-card-2: #22181e;
    --fin-line: #3c2a33;
    --fin-line-strong: #543a45;
    --fin-accent: #f47ba8;
    --fin-accent-2: #f897bb;
    --fin-gold: #6db3e2;
    --fin-gold-soft: #102d3d;
    --fin-accent-soft: #3d202e80;
    --fin-accent-ink: #faa8c8;
    --fin-grad: linear-gradient(135deg, #f27da6 0%, #f47ba8 52%, #f897bb 100%);
    --fin-hero-grad: linear-gradient(135deg, #9c2f57 0%, #d24f7f 52%, #2f6f96 128%);
    --fin-danger: #f4877f;
    --fin-danger-soft: #3c201e;
    --fin-warn: #e5c06b;
    --fin-warn-soft: #38301a;
    --fin-input-bg: #231920;
    --fin-track: #34242c;
    color-scheme: dark;
}

/* ---------- Hero：奶蓝顶线 + 圆形软徽 + 气泡圆斑 ---------- */
.fin.baby .fin-hero {
    border-top: 3px solid #4b8fc4;
    border-radius: 22px;
}
.fin.baby .fin-hero::before {
    content: "";
    position: absolute; right: -70px; top: -90px;
    width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.14), rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.fin.baby .fin-hero::after {
    content: "";
    position: absolute; left: 38%; bottom: -40px;
    width: 90px; height: 90px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.10), rgba(255,255,255,0) 72%);
    pointer-events: none;
}
.fin.baby .fin-hero-icon {
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    border: 1.5px solid rgba(255,255,255,.30);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.08), 0 6px 18px -8px rgba(0,0,0,.3);
}

/* ---------- 输入卡片：更大圆角 ---------- */
.fin.baby .fin-card { border-radius: 18px; }
.fin.baby .fin-field input,
.fin.baby .fin-field select { border-radius: 12px; }

/* ---------- 模式选择药丸（自动 / 手动） ---------- */
.bd-pill {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    min-height: 42px; padding: 0 20px; border-radius: 999px;
    border: 1.5px solid var(--fin-line-strong); background: var(--fin-input-bg);
    font-size: 14px; font-weight: 700; color: var(--fin-ink-soft);
    cursor: pointer; transition: all .15s; user-select: none;
}
.bd-pill:hover { border-color: var(--fin-accent); }
.bd-pill input[type="radio"] {
    position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.bd-pill:has(input:checked) {
    background: var(--fin-grad); border-color: transparent; color: #fff;
    box-shadow: var(--fin-shadow-soft);
}

/* ---------- 自动模式提示条 ---------- */
.bd-hint {
    display: none;
    margin-top: 12px; padding: 10px 14px; border-radius: 12px;
    background: var(--fin-accent-soft); color: var(--fin-accent-ink);
    font-size: 12.5px; line-height: 1.8;
}
:root[data-theme="dark"] .fin.baby .bd-hint { color: var(--fin-accent-ink); }
.bd-hint b { font-weight: 800; }

/* ---------- 当月 / 累计 两栏软卡 ---------- */
.bd-ab { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 4px; }
.bd-plan {
    border: 1.5px solid var(--fin-line);
    border-radius: 18px;
    padding: 18px 20px;
    background: var(--fin-card);
    position: relative;
    min-width: 0;
}
.bd-plan.cur {
    border-color: color-mix(in srgb, var(--fin-accent) 45%, transparent);
    background:
        radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--fin-accent) 9%, transparent), transparent 62%),
        var(--fin-card);
}
.bd-plan.acc {
    border-color: color-mix(in srgb, var(--fin-gold) 40%, transparent);
    background:
        radial-gradient(130% 150% at 100% 0%, color-mix(in srgb, var(--fin-gold) 8%, transparent), transparent 62%),
        var(--fin-card);
}
.bd-plan .tp-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--fin-ink); }
.bd-plan .tp-badge {
    font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 99px;
    background: var(--fin-grad); color: #fff;
}
.bd-plan.acc .tp-badge { background: var(--fin-gold); }
.bd-plan .tp-rows { margin-top: 12px; border-top: 1px dashed var(--fin-line); }
.bd-plan .tp-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 9px 0; border-bottom: 1px dashed var(--fin-line);
    font-size: 13.5px; line-height: 1.6;
}
.bd-plan:last-child .tp-row,
.bd-plan .tp-row:last-child { border-bottom: 0; }
.bd-plan .tp-row span { color: var(--fin-ink-soft); }
.bd-plan .tp-row b { font-family: var(--fin-num); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 800; }

/* ---------- 分段表圆润化 ---------- */
.fin.baby .fin-table { border-radius: 14px; overflow: hidden; }

@media (max-width: 760px) {
    .bd-ab { grid-template-columns: minmax(0,1fr); }
}