/*!
 * 育儿成本 0–18 岁计算器 · child-raising-cost-calc
 * 独立设计系统「成长账本」：暖砂纸底 + 深松墨绿 + 陶土橘 + 芥末金
 * 结构：横向 18 年刻度轴 + 参数单据台 + 阶段票据流
 * 深浅双主题：默认跟随导航栏的 #themeToggle（auto/light/dark 三态），页面不设独立开关。
 */

.crc-page {
    --crc-bg: #f7f1e6;
    --crc-bg2: #efe6d6;
    --crc-card: #fffdf8;
    --crc-card2: #faf4e8;
    --crc-line: #e0d4bf;
    --crc-line2: #cfc0a6;
    --crc-ink: #23302b;
    --crc-ink2: #4d5f56;
    --crc-ink3: #8a9a90;
    --crc-green: #17493c;
    --crc-green2: #2b6a58;
    --crc-green-soft: rgba(23, 73, 60, .08);
    --crc-clay: #c85f2c;
    --crc-clay-soft: rgba(200, 95, 44, .1);
    --crc-gold: #b8862c;
    --crc-gold-soft: rgba(184, 134, 44, .12);
    --crc-shadow: 0 18px 40px -28px rgba(35, 48, 43, .5);
    --crc-shadow-s: 0 8px 20px -14px rgba(35, 48, 43, .45);
    --crc-radius: 16px;
    --crc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

    color: var(--crc-ink);
    font-size: 15px;
    line-height: 1.8;
}

:root[data-theme="dark"] .crc-page {
    --crc-bg: #131a17;
    --crc-bg2: #0f1512;
    --crc-card: #1b2420;
    --crc-card2: #202b26;
    --crc-line: #2e3d36;
    --crc-line2: #3c4d45;
    --crc-ink: #e6efe9;
    --crc-ink2: #b6c7bd;
    --crc-ink3: #7f9289;
    --crc-green: #4fb99a;
    --crc-green2: #63c9ac;
    --crc-green-soft: rgba(79, 185, 154, .12);
    --crc-clay: #e98a57;
    --crc-clay-soft: rgba(233, 138, 87, .14);
    --crc-gold: #d9ae5c;
    --crc-gold-soft: rgba(217, 174, 92, .14);
    --crc-shadow: 0 18px 40px -26px rgba(0, 0, 0, .8);
    --crc-shadow-s: 0 8px 20px -12px rgba(0, 0, 0, .7);
}

.crc-page *, .crc-page *::before, .crc-page *::after { box-sizing: border-box; }

.crc-page .crc-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 16px 10px;
}

/* ================= Hero ================= */
.crc-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 26px;
    align-items: center;
    padding: 30px 30px 26px;
    border-radius: 22px;
    background:
        radial-gradient(120% 120% at 100% 0%, var(--crc-green-soft) 0%, transparent 55%),
        linear-gradient(180deg, var(--crc-card) 0%, var(--crc-card2) 100%);
    border: 1.5px solid var(--crc-line);
    box-shadow: var(--crc-shadow);
}

.crc-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--crc-green);
    background: var(--crc-green-soft);
    border-radius: 999px;
}

.crc-hero h1 {
    margin: 12px 0 8px;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--crc-ink);
}

.crc-sub {
    margin: 0;
    max-width: 46em;
    font-size: 15.5px;
    line-height: 1.9;
    color: var(--crc-ink2);
}

.crc-sub b { color: var(--crc-ink); font-weight: 700; }

.crc-hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.crc-fact {
    padding: 12px 13px;
    border-radius: 14px;
    background: var(--crc-card);
    border: 1px solid var(--crc-line);
}

.crc-fact b {
    display: block;
    font-family: var(--crc-mono);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--crc-green);
    font-variant-numeric: tabular-nums;
}

.crc-fact span {
    font-size: 12px;
    color: var(--crc-ink3);
}

.crc-fact.hot b { color: var(--crc-clay); }

/* ================= 18 年刻度轴 ================= */
.crc-axis-box {
    padding: 16px 16px 12px;
    border-radius: 18px;
    background: var(--crc-card);
    border: 1.5px solid var(--crc-line);
}

.crc-axis-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 12.5px;
    color: var(--crc-ink3);
    margin-bottom: 14px;
}

.crc-axis-title b { color: var(--crc-ink); font-size: 13.5px; }

.crc-axis {
    position: relative;
    display: grid;
    grid-template-columns: repeat(19, minmax(0, 1fr));
    gap: 2px;
    align-items: end;
    padding-top: 6px;
}

.crc-axis::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 12px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--crc-green) 0%, var(--crc-green2) 45%, var(--crc-gold) 72%, var(--crc-clay) 100%);
    opacity: .55;
}

.crc-tick {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding-top: 16px;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
}

.crc-tick i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--crc-card);
    border: 2.5px solid var(--crc-green);
    transition: transform .15s, background .15s;
}

.crc-tick span {
    font-family: var(--crc-mono);
    font-size: 10.5px;
    color: var(--crc-ink3);
}

.crc-tick:hover i { transform: scale(1.25); }

.crc-tick.now i {
    background: var(--crc-clay);
    border-color: var(--crc-clay);
    transform: scale(1.35);
}

.crc-tick.now span { color: var(--crc-clay); font-weight: 700; }

.crc-stage-strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    margin-top: 12px;
}

.crc-stage-chip {
    padding: 7px 6px;
    text-align: center;
    border-radius: 10px;
    font-size: 11.5px;
    color: var(--crc-ink2);
    background: var(--crc-card2);
    border: 1px solid var(--crc-line);
    cursor: pointer;
    transition: all .15s;
}

.crc-stage-chip b { display: block; font-size: 12.5px; color: var(--crc-ink); }

.crc-stage-chip:hover { border-color: var(--crc-clay); }

.crc-stage-chip.on {
    color: #fff;
    background: var(--crc-clay);
    border-color: var(--crc-clay);
}

.crc-stage-chip.on b { color: #fff; }

/* ================= 主体两栏 ================= */
.crc-body {
    display: grid;
    grid-template-columns: 336px minmax(0, 1fr);
    gap: 22px;
    margin-top: 22px;
    align-items: start;
}

.crc-panel {
    padding: 20px;
    border-radius: var(--crc-radius);
    background: var(--crc-card);
    border: 1.5px solid var(--crc-line);
    box-shadow: var(--crc-shadow-s);
}

.crc-panel h2 {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 800;
    color: var(--crc-ink);
}

.crc-panel .crc-hint {
    margin: 0 0 16px;
    font-size: 12.5px;
    line-height: 1.75;
    color: var(--crc-ink3);
}

.crc-field { margin-bottom: 17px; }

.crc-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
    color: var(--crc-ink);
}

.crc-label em {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--crc-ink3);
}

.crc-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.crc-seg button {
    flex: 1 1 auto;
    min-width: 62px;
    padding: 8px 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--crc-ink2);
    background: var(--crc-card2);
    border: 1.5px solid var(--crc-line);
    border-radius: 10px;
    cursor: pointer;
    transition: all .15s;
}

.crc-seg button:hover { border-color: var(--crc-green); color: var(--crc-green); }

.crc-seg button.on {
    color: #fff;
    background: var(--crc-green);
    border-color: var(--crc-green);
}

.crc-tier-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.crc-tier {
    padding: 10px 11px;
    text-align: left;
    background: var(--crc-card2);
    border: 1.5px solid var(--crc-line);
    border-radius: 12px;
    cursor: pointer;
    transition: all .15s;
    font: inherit;
}

.crc-tier b { display: block; font-size: 13.5px; color: var(--crc-ink); }

.crc-tier span { font-size: 11px; color: var(--crc-ink3); line-height: 1.5; }

.crc-tier:hover { border-color: var(--crc-gold); }

.crc-tier.on {
    background: var(--crc-gold-soft);
    border-color: var(--crc-gold);
}

.crc-tier.on b { color: var(--crc-gold); }

.crc-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-size: 15px;
    font-family: var(--crc-mono);
    font-variant-numeric: tabular-nums;
    color: var(--crc-ink);
    background: var(--crc-card2);
    border: 1.5px solid var(--crc-line);
    border-radius: 10px;
    outline: none;
}

.crc-input:focus { border-color: var(--crc-green); }

.crc-input.bad { border-color: var(--crc-clay); background: var(--crc-clay-soft); }

.crc-range {
    width: 100%;
    margin-top: 9px;
    accent-color: var(--crc-green);
}

.crc-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border-radius: 11px;
    background: var(--crc-card2);
    border: 1px solid var(--crc-line);
}

.crc-switch b { font-size: 13px; color: var(--crc-ink); }

.crc-switch span { display: block; font-size: 11px; color: var(--crc-ink3); }

.crc-switch input {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    accent-color: var(--crc-green);
    cursor: pointer;
}

.crc-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 16px;
}

.crc-btn {
    padding: 11px 10px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--crc-ink);
    background: var(--crc-card2);
    border: 1.5px solid var(--crc-line);
    border-radius: 11px;
    cursor: pointer;
    transition: all .15s;
}

.crc-btn:hover { border-color: var(--crc-green); color: var(--crc-green); }

.crc-btn--main {
    grid-column: 1 / -1;
    color: #fff;
    background: linear-gradient(135deg, var(--crc-green) 0%, var(--crc-green2) 100%);
    border-color: transparent;
    box-shadow: 0 10px 22px -12px var(--crc-green);
}

.crc-btn--main:hover { color: #fff; filter: brightness(1.06); }

.crc-err {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--crc-clay);
    background: var(--crc-clay-soft);
    border: 1px solid var(--crc-clay);
    border-radius: 10px;
    padding: 8px 11px;
}

.crc-err[hidden] { display: none; }

/* ================= 阶段票据 ================= */
.crc-receipts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 14px;
}

.crc-receipt {
    position: relative;
    padding: 16px 16px 14px;
    border-radius: 14px;
    background: var(--crc-card);
    border: 1.5px solid var(--crc-line);
    box-shadow: var(--crc-shadow-s);
    cursor: pointer;
    transition: transform .16s, border-color .16s, box-shadow .16s;
}

.crc-receipt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 14px 0 0 14px;
    background: var(--crc-green);
}

.crc-receipt.s1::before { background: var(--crc-green); }
.crc-receipt.s2::before { background: var(--crc-green2); }
.crc-receipt.s3::before { background: var(--crc-gold); }
.crc-receipt.s4::before { background: var(--crc-gold); }
.crc-receipt.s5::before { background: var(--crc-clay); }
.crc-receipt.s6::before { background: var(--crc-clay); }

.crc-receipt:hover { transform: translateY(-3px); box-shadow: var(--crc-shadow); }

.crc-receipt.on {
    border-color: var(--crc-clay);
    box-shadow: 0 16px 34px -22px var(--crc-clay);
}

.crc-receipt-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.crc-receipt-age {
    font-family: var(--crc-mono);
    font-size: 12px;
    color: var(--crc-ink3);
}

.crc-receipt-head b {
    font-size: 15px;
    font-weight: 800;
    color: var(--crc-ink);
}

.crc-receipt-num {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 10px;
}

.crc-receipt-num em {
    font-style: normal;
    font-size: 11.5px;
    color: var(--crc-ink3);
}

.crc-receipt-num b {
    font-family: var(--crc-mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--crc-clay);
    font-variant-numeric: tabular-nums;
}

.crc-lines { display: flex; flex-direction: column; gap: 4px; }

.crc-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--crc-ink2);
}

.crc-line b {
    font-family: var(--crc-mono);
    font-weight: 600;
    color: var(--crc-ink);
    font-variant-numeric: tabular-nums;
}

.crc-line.total {
    margin-top: 6px;
    padding-top: 7px;
    border-top: 1px dashed var(--crc-line2);
    font-weight: 700;
    color: var(--crc-ink);
}

/* ================= 总账 ================= */
.crc-total {
    margin-top: 22px;
    padding: 22px;
    border-radius: var(--crc-radius);
    background:
        linear-gradient(180deg, var(--crc-card) 0%, var(--crc-card2) 100%);
    border: 1.5px solid var(--crc-line);
    box-shadow: var(--crc-shadow-s);
}

.crc-total h2 {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 800;
}

.crc-total-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 12px;
}

.crc-kpi {
    padding: 14px 15px;
    border-radius: 13px;
    background: var(--crc-card);
    border: 1px solid var(--crc-line);
}

.crc-kpi span { font-size: 12px; color: var(--crc-ink3); }

.crc-kpi b {
    display: block;
    margin: 3px 0 2px;
    font-family: var(--crc-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--crc-ink);
    font-variant-numeric: tabular-nums;
}

.crc-kpi em { font-style: normal; font-size: 11.5px; color: var(--crc-ink3); }

.crc-kpi.warn b { color: var(--crc-clay); }
.crc-kpi.good b { color: var(--crc-green); }

.crc-bar {
    margin-top: 16px;
}

.crc-bar-track {
    height: 12px;
    border-radius: 999px;
    background: var(--crc-bg2);
    border: 1px solid var(--crc-line);
    overflow: hidden;
}

.crc-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--crc-green) 0%, var(--crc-gold) 70%, var(--crc-clay) 100%);
    transition: width .35s ease;
}

.crc-bar-text {
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--crc-ink2);
}

.crc-advice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.crc-tip {
    padding: 14px 15px;
    border-radius: 13px;
    background: var(--crc-green-soft);
    border: 1px solid var(--crc-line);
}

.crc-tip b { display: block; margin-bottom: 4px; font-size: 13.5px; color: var(--crc-green); }

.crc-tip p { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--crc-ink2); }

.crc-tip.gold { background: var(--crc-gold-soft); }
.crc-tip.gold b { color: var(--crc-gold); }

.crc-tip.clay { background: var(--crc-clay-soft); }
.crc-tip.clay b { color: var(--crc-clay); }

/* ================= 批量对比 ================= */
.crc-compare {
    margin-top: 22px;
    padding: 22px;
    border-radius: var(--crc-radius);
    background: var(--crc-card);
    border: 1.5px solid var(--crc-line);
    box-shadow: var(--crc-shadow-s);
}

.crc-compare h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }

.crc-compare .crc-hint { margin: 0 0 14px; font-size: 12.5px; color: var(--crc-ink3); }

.crc-cmp-list { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }

.crc-cmp-row {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 34px;
    gap: 9px;
    align-items: center;
}

.crc-cmp-row select,
.crc-cmp-row input {
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    color: var(--crc-ink);
    background: var(--crc-card2);
    border: 1.5px solid var(--crc-line);
    border-radius: 9px;
    outline: none;
}

.crc-cmp-row select:focus, .crc-cmp-row input:focus { border-color: var(--crc-green); }

.crc-cmp-del {
    height: 32px;
    width: 32px;
    border-radius: 9px;
    border: 1.5px solid var(--crc-line);
    background: var(--crc-card2);
    color: var(--crc-ink3);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}

.crc-cmp-del:hover { color: var(--crc-clay); border-color: var(--crc-clay); }

.crc-cmp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.crc-cmp-table th {
    text-align: left;
    padding: 9px 10px;
    font-size: 11.5px;
    color: var(--crc-ink3);
    background: var(--crc-card2);
    border-bottom: 1.5px solid var(--crc-line);
    white-space: nowrap;
}

.crc-cmp-table td {
    padding: 10px;
    border-bottom: 1px dashed var(--crc-line);
    color: var(--crc-ink);
    vertical-align: middle;
}

.crc-cmp-table .num {
    font-family: var(--crc-mono);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.crc-cmp-bar {
    height: 9px;
    min-width: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--crc-green), var(--crc-green2));
}

.crc-cmp-bar.alt { background: linear-gradient(90deg, var(--crc-gold), var(--crc-clay)); }

/* ================= 逐年明细 ================= */
.crc-years {
    margin-top: 22px;
    padding: 22px;
    border-radius: var(--crc-radius);
    background: var(--crc-card);
    border: 1.5px solid var(--crc-line);
    box-shadow: var(--crc-shadow-s);
}

.crc-years-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.crc-years-head h2 { margin: 0; font-size: 18px; font-weight: 800; }

.crc-year-table { width: 100%; border-collapse: collapse; font-size: 13px; }

.crc-year-table th {
    position: sticky;
    top: 0;
    text-align: left;
    padding: 9px 10px;
    font-size: 11.5px;
    color: var(--crc-ink3);
    background: var(--crc-card2);
    border-bottom: 1.5px solid var(--crc-line);
    white-space: nowrap;
}

.crc-year-table td {
    padding: 9px 10px;
    border-bottom: 1px dashed var(--crc-line);
    color: var(--crc-ink);
}

.crc-year-table .num {
    font-family: var(--crc-mono);
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.crc-year-table tr.stage-now td { background: var(--crc-clay-soft); }

.crc-year-table .crc-expand {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1.5px solid var(--crc-line);
    background: var(--crc-card2);
    color: var(--crc-ink2);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

.crc-year-table .crc-expand:hover { border-color: var(--crc-green); color: var(--crc-green); }

.crc-detail-row td {
    background: var(--crc-card2);
    padding: 10px 12px 12px 46px;
}

.crc-detail-row .crc-lines { gap: 3px; }

/* ================= 提示 / 弹层 ================= */
.crc-toast {
    position: fixed;
    left: 50%;
    bottom: 34px;
    transform: translate(-50%, 16px);
    z-index: 9999;
    max-width: 88vw;
    padding: 11px 18px;
    border-radius: 12px;
    font-size: 13.5px;
    color: #fff;
    background: rgba(23, 73, 60, .95);
    box-shadow: var(--crc-shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}

.crc-toast.show { opacity: 1; transform: translate(-50%, 0); }

.crc-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(20, 26, 23, .55);
    backdrop-filter: blur(3px);
}

.crc-modal[hidden] { display: none !important; }

.crc-sheet {
    width: min(560px, 100%);
    max-height: 84vh;
    overflow: auto;
    padding: 22px;
    border-radius: 18px;
    background: var(--crc-card);
    border: 1.5px solid var(--crc-line);
    box-shadow: var(--crc-shadow);
}

.crc-sheet h3 { margin: 0 0 10px; font-size: 17px; font-weight: 800; }

.crc-sheet p { margin: 0 0 14px; font-size: 13px; line-height: 1.85; color: var(--crc-ink2); }

.crc-sheet-code {
    display: block;
    padding: 11px 13px;
    border-radius: 10px;
    font-family: var(--crc-mono);
    font-size: 12px;
    word-break: break-all;
    color: var(--crc-ink);
    background: var(--crc-bg2);
    border: 1px dashed var(--crc-line2);
    margin-bottom: 14px;
}

.crc-sheet-actions { display: flex; gap: 9px; justify-content: flex-end; }

/* ================= 首屏快捷入口 ================= */
.crc-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--crc-card);
    border: 1.5px solid var(--crc-line);
    box-shadow: var(--crc-shadow-s);
}

.crc-quick-label { font-size: 12.5px; color: var(--crc-ink3); }

.crc-quick-btn {
    padding: 8px 13px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--crc-ink2);
    background: var(--crc-card2);
    border: 1.5px solid var(--crc-line);
    border-radius: 999px;
    cursor: pointer;
    transition: all .15s;
}

.crc-quick-btn:hover { border-color: var(--crc-green); color: var(--crc-green); }

.crc-quick-btn--main {
    margin-left: auto;
    color: #fff;
    background: linear-gradient(135deg, var(--crc-green) 0%, var(--crc-green2) 100%);
    border-color: transparent;
    box-shadow: 0 10px 22px -12px var(--crc-green);
}

.crc-quick-btn--main:hover { color: #fff; filter: brightness(1.06); }

.crc-table-scroll { overflow-x: auto; }

/* ================= 响应式 ================= */
@media (max-width: 1000px) {
    .crc-hero { grid-template-columns: 1fr; }
    .crc-body { grid-template-columns: 1fr; }
    .crc-panel { position: static !important; }
}

@media (max-width: 700px) {
    .crc-wrap { padding: 14px 12px 8px; }
    .crc-hero { padding: 20px 16px; }
    .crc-hero-facts { grid-template-columns: 1fr; }
    .crc-axis { grid-template-columns: repeat(19, minmax(0, 1fr)); gap: 1px; }
    .crc-tick span { font-size: 9px; }
    .crc-stage-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .crc-tier-grid { grid-template-columns: 1fr; }
    .crc-cmp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 8px; }
    .crc-cmp-del { grid-column: 2; justify-self: end; }
    .crc-table-scroll { overflow-x: auto; }
    .crc-year-table { min-width: 560px; }
}

@media print {
    .crc-page { --crc-bg: #fff; --crc-card: #fff; --crc-card2: #fff; }
    .crc-compare, .crc-years, .crc-panel .crc-actions, .crc-toast, .crc-modal { display: none !important; }
    .crc-hero, .crc-total, .crc-receipt { box-shadow: none; break-inside: avoid; }
}