/* ==========================================================================
   退休返聘收入与社保影响计算器
   设计语言：工资条 / 退休证 + 账本横线
   作用域：.rh-page（变量 rh- 前缀）
   ========================================================================== */

.rh-page {
    --rh-bg: #f7f1e4;
    --rh-card: #fffdf8;
    --rh-ink: #2a211b;
    --rh-ink-2: #5c5046;
    --rh-ink-3: #8d8073;
    --rh-line: #e5d9c4;
    --rh-line-2: #f0e7d5;
    --rh-clay: #b4553a;
    --rh-clay-2: #cf7355;
    --rh-clay-soft: #f9e7df;
    --rh-olive: #6b7a4f;
    --rh-olive-soft: #eef0e2;
    --rh-gold: #b8862f;
    --rh-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
    --rh-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, sans-serif;

    background:
        radial-gradient(640px 300px at 4% -6%, rgba(180, 85, 58, .1), transparent 62%),
        radial-gradient(520px 280px at 98% 4%, rgba(107, 122, 79, .1), transparent 60%),
        var(--rh-bg);
    color: var(--rh-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    line-height: 1.78;
    -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .rh-page {
    --rh-bg: #12100d;
    --rh-card: #1b1814;
    --rh-ink: #f2e9dc;
    --rh-ink-2: #b9ab9a;
    --rh-ink-3: #8a7d6d;
    --rh-line: #322b23;
    --rh-line-2: #262119;
    --rh-clay: #e08565;
    --rh-clay-2: #f0a184;
    --rh-clay-soft: #2e1c15;
    --rh-olive: #a3b47f;
    --rh-olive-soft: #232619;
    --rh-gold: #dcb264;
    background:
        radial-gradient(640px 300px at 4% -6%, rgba(224, 133, 101, .08), transparent 62%),
        radial-gradient(520px 280px at 98% 4%, rgba(163, 180, 127, .06), transparent 60%),
        var(--rh-bg);
}

.rh-page *, .rh-page *::before, .rh-page *::after { box-sizing: border-box; }
.rh-wrap { width: min(1150px, calc(100% - 40px)); margin: 0 auto; }
.rh-page a { color: inherit; text-decoration: none; }

/* ---------- 首屏 ---------- */
.rh-hero {
    position: relative;
    overflow: hidden;
    padding: 26px 0 54px;
    background:
        repeating-linear-gradient(180deg, transparent 0 31px, rgba(180, 85, 58, .07) 31px 32px),
        linear-gradient(180deg, #fbf5e8 0%, #f5eddd 78%, transparent 100%);
    border-bottom: 1px solid var(--rh-line);
}

.rh-hero::after {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 54px;
    background: linear-gradient(90deg, rgba(180, 85, 58, .12), transparent);
    pointer-events: none;
}

:root[data-theme="dark"] .rh-hero {
    background:
        repeating-linear-gradient(180deg, transparent 0 31px, rgba(224, 133, 101, .06) 31px 32px),
        linear-gradient(180deg, #171310 0%, #12100d 80%, transparent 100%);
}

.rh-hero > .rh-wrap { position: relative; z-index: 1; }

.rh-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 30px; }
.rh-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--rh-ink-3); }
.rh-crumb a:hover { color: var(--rh-clay); }
.rh-crumb i { font-style: normal; opacity: .5; }
.rh-crumb b { color: var(--rh-ink); font-weight: 600; }

.rh-modes { display: inline-flex; padding: 3px; border: 1px solid var(--rh-line); border-radius: 999px; background: rgba(255, 255, 255, .6); }
.rh-modes button { border: 0; background: transparent; color: var(--rh-ink-2); font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: all .18s ease; }
.rh-modes button.is-on { background: var(--rh-clay); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .rh-modes { background: rgba(255, 255, 255, .04); }

.rh-hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 42px; align-items: start; }

.rh-kicker { margin: 0 0 14px; font-family: var(--rh-mono); font-size: 11px; letter-spacing: .2em; color: var(--rh-clay); font-weight: 700; }

.rh-intro h1 { margin: 0 0 16px; font-family: var(--rh-display); font-size: clamp(32px, 3.9vw, 48px); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
.rh-intro h1 em { font-style: normal; color: var(--rh-clay); border-bottom: 4px solid rgba(180, 85, 58, .25); }

.rh-lede { margin: 0 0 20px; max-width: 33em; font-size: 15px; line-height: 1.95; color: var(--rh-ink-2); }
.rh-lede strong { color: var(--rh-ink); font-weight: 700; }

.rh-chips { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.rh-chips li { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; color: var(--rh-ink-2); }
.rh-chips b { flex: none; min-width: 34px; text-align: center; padding: 1px 6px; border-radius: 2px; background: var(--rh-olive-soft); color: var(--rh-olive); font-size: 11.5px; }

.rh-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rh-presets > span { font-size: 12.5px; color: var(--rh-ink-3); }
.rh-presets button { font: inherit; font-size: 12.5px; padding: 7px 12px; border-radius: 4px; border: 1px solid var(--rh-line); background: var(--rh-card); color: var(--rh-ink-2); cursor: pointer; transition: all .16s ease; }
.rh-presets button:hover { border-color: var(--rh-clay); color: var(--rh-clay); }
.rh-presets button.is-on { border-color: var(--rh-clay); background: var(--rh-clay-soft); color: var(--rh-clay); font-weight: 600; }

/* ---------- 工资条 ---------- */
.rh-slip {
    position: relative;
    margin-top: 10px;
    padding: 22px 22px 18px;
    background: var(--rh-card);
    border: 1px solid var(--rh-line);
    border-radius: 3px;
    box-shadow: 0 30px 60px -46px rgba(42, 33, 27, .6);
}

.rh-slip-tear {
    position: absolute;
    left: -1px; right: -1px; top: -9px;
    height: 9px;
    background:
        linear-gradient(135deg, var(--rh-card) 5px, transparent 0) 0 0,
        linear-gradient(-135deg, var(--rh-card) 5px, transparent 0) 0 0;
    background-size: 10px 9px;
    background-repeat: repeat-x;
    filter: drop-shadow(0 -1px 0 var(--rh-line));
}

.rh-slip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--rh-ink); }
.rh-slip-head h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: .02em; }
.rh-slip-head span { display: block; margin-top: 3px; font-family: var(--rh-mono); font-size: 9px; letter-spacing: .16em; color: var(--rh-ink-3); }

.rh-stamp {
    flex: none;
    padding: 3px 8px;
    border: 2px solid rgba(180, 85, 58, .55);
    border-radius: 3px;
    color: rgba(180, 85, 58, .8);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2em;
    transform: rotate(-6deg);
}
:root[data-theme="dark"] .rh-stamp { border-color: rgba(224, 133, 101, .6); color: rgba(224, 133, 101, .9); }

.rh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; padding: 13px 0; }

.rh-field { display: grid; gap: 3px; min-width: 0; }
.rh-field > span { font-size: 11px; color: var(--rh-ink-3); }
.rh-field .rh-input { display: flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid var(--rh-line); border-radius: 4px; background: #fbf7ec; transition: border-color .16s ease, box-shadow .16s ease; }
:root[data-theme="dark"] .rh-field .rh-input { background: #17140f; border-color: #322b23; }
.rh-field .rh-input:focus-within { border-color: var(--rh-clay); box-shadow: 0 0 0 3px rgba(180, 85, 58, .12); }
.rh-field input, .rh-field select { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; color: #2a211b; font: inherit; font-family: var(--rh-mono); font-size: 13px; padding: 7px 0; font-variant-numeric: tabular-nums; appearance: none; }
.rh-page .rh-field .rh-input input,
.rh-page .rh-field .rh-input select { background: transparent; color: #2a211b; -webkit-text-fill-color: #2a211b; }
:root[data-theme="dark"] .rh-field .rh-input input,
:root[data-theme="dark"] .rh-field .rh-input select { color: #f2e9dc; -webkit-text-fill-color: #f2e9dc; }
.rh-field .rh-input em { flex: none; font-style: normal; font-size: 10.5px; color: var(--rh-ink-3); }

.rh-slip-result { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 1px dashed var(--rh-line); }
.rh-slip-main > span { display: block; font-size: 11.5px; color: var(--rh-ink-3); }
.rh-slip-main b { display: flex; align-items: baseline; gap: 2px; font-family: var(--rh-display); font-size: clamp(32px, 4vw, 42px); font-weight: 800; line-height: 1.08; color: var(--rh-clay); font-variant-numeric: tabular-nums; }
.rh-slip-main b small { font-size: 15px; }
.rh-slip-side { display: grid; gap: 5px; text-align: right; font-size: 11px; color: var(--rh-ink-3); }
.rh-slip-side b { display: block; font-family: var(--rh-mono); font-size: 13.5px; color: var(--rh-ink); }
.rh-slip-side b span { font: inherit; color: inherit; }

.rh-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--rh-ink-3); }

/* ---------- 正文 ---------- */
.rh-body { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 30px; padding: 38px 0 30px; align-items: start; }
.rh-main { display: grid; gap: 20px; min-width: 0; }
.rh-main > * { min-width: 0; }
.rh-card { background: var(--rh-card); border: 1px solid var(--rh-line); border-radius: 6px; padding: 24px 26px; box-shadow: 0 20px 44px -46px rgba(42, 33, 27, .5); }
.rh-card-head { margin-bottom: 12px; }
.rh-card-head h2 { margin: 0; font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rh-card-head h2 i { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--rh-clay-soft); color: var(--rh-clay); font-style: normal; font-family: var(--rh-mono); font-size: 11px; font-weight: 700; }
.rh-card-head p { margin: 7px 0 0; font-size: 13px; color: var(--rh-ink-3); }

.rh-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; margin-top: 14px; }
.rh-bill { border: 1px solid var(--rh-line); border-radius: 5px; padding: 2px 14px; background: var(--rh-card); }
.rh-bill-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--rh-line); font-size: 13px; color: var(--rh-ink-2); }
.rh-bill-row b { font-family: var(--rh-mono); color: var(--rh-ink); white-space: nowrap; }
.rh-bill-row.is-minus b { color: var(--rh-clay); }
.rh-bill-total { display: flex; justify-content: space-between; align-items: baseline; margin: 4px -14px 0; padding: 11px 14px; background: var(--rh-ink); color: #fff; font-size: 13px; border-radius: 0 0 4px 4px; }
.rh-bill-total b { font-family: var(--rh-mono); font-size: 19px; }

.rh-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rh-kpi > div { border: 1px solid var(--rh-line); border-radius: 5px; padding: 9px 10px; }
.rh-kpi span { display: block; font-size: 10.5px; color: var(--rh-ink-3); }
.rh-kpi b { display: block; margin-top: 2px; font-family: var(--rh-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.rh-kpi b span { display: inline; font: inherit; color: inherit; }

.rh-taxbar { display: flex; height: 14px; margin-top: 12px; border-radius: 3px; overflow: hidden; background: var(--rh-line-2); }
.rh-seg { height: 100%; width: 0; transition: width .4s ease; }
.rh-seg.seg-keep { background: linear-gradient(90deg, var(--rh-olive), #8a9a6a); }
.rh-seg.seg-tax { background: var(--rh-clay); }
.rh-legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--rh-ink-3); }
.rh-legend li { display: flex; align-items: center; gap: 5px; }
.rh-legend i { width: 8px; height: 8px; border-radius: 2px; }
.rh-legend .seg-keep { background: var(--rh-olive); }
.rh-legend .seg-tax { background: var(--rh-clay); }
.rh-legend b { font-family: var(--rh-mono); color: var(--rh-ink); }
.rh-tip { margin: 10px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--rh-ink-3); }

.rh-table-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--rh-line); border-radius: 5px; }
.rh-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13px; }
.rh-table th, .rh-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--rh-line-2); white-space: nowrap; }
.rh-table th { background: var(--rh-bg); color: var(--rh-ink-2); font-size: 12px; font-weight: 600; }
.rh-table th:first-child, .rh-table td:first-child { text-align: left; }
.rh-table td { font-family: var(--rh-mono); font-variant-numeric: tabular-nums; }
.rh-table tbody tr:last-child td { border-bottom: 0; }
.rh-table tr.is-on { background: var(--rh-clay-soft); }
.rh-table tr.is-on td { color: var(--rh-clay); font-weight: 700; }
.rh-table-social { min-width: 720px; }
.rh-table-social td { font-family: inherit; color: var(--rh-ink-2); white-space: normal; text-align: left; font-size: 12.5px; line-height: 1.65; }
.rh-table-social th { text-align: left; }

.rh-cost-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; margin-top: 14px; }
.rh-cost-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.rh-cost-stats > div { border: 1px solid var(--rh-line); border-radius: 5px; padding: 10px 12px; background: linear-gradient(180deg, var(--rh-olive-soft), transparent 150%); }
.rh-cost-stats > div > span { display: block; font-size: 10.5px; color: var(--rh-ink-3); }
.rh-cost-stats b { display: block; margin-top: 2px; font-family: var(--rh-mono); font-size: 18px; font-variant-numeric: tabular-nums; }
.rh-cost-stats b span { font: inherit; color: inherit; }
.rh-cost-stats em { display: block; margin-top: 2px; font-style: normal; font-size: 10px; color: var(--rh-ink-3); }

.rh-formula { margin-top: 12px; padding: 13px 15px; border: 1px dashed var(--rh-line); border-radius: 4px; background: var(--rh-bg); font-family: var(--rh-mono); font-size: 12px; line-height: 2; color: var(--rh-ink-2); overflow-x: auto; }
.rh-notes { display: grid; gap: 10px; margin-top: 14px; }
.rh-notes > div { padding: 12px 14px; border-radius: 4px; background: var(--rh-bg); border-left: 3px solid var(--rh-clay); font-size: 13px; color: var(--rh-ink-2); }
.rh-notes b { color: var(--rh-ink); }

.rh-faq details { border-bottom: 1px solid var(--rh-line-2); }
.rh-faq details:last-child { border-bottom: 0; }
.rh-faq summary { position: relative; list-style: none; cursor: pointer; padding: 12px 30px 12px 0; font-size: 14.5px; font-weight: 600; }
.rh-faq summary::-webkit-details-marker { display: none; }
.rh-faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-family: var(--rh-mono); font-size: 18px; color: var(--rh-clay); transition: transform .2s ease; }
.rh-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.rh-faq p { margin: 0; padding: 0 8px 14px 0; font-size: 13.5px; line-height: 1.95; color: var(--rh-ink-2); }

/* ---------- 侧栏 ---------- */
.rh-rail { position: sticky; top: 24px; display: grid; gap: 14px; }
.rh-rail-card { background: var(--rh-card); border: 1px solid var(--rh-line); border-radius: 6px; padding: 18px; }
.rh-rail-card h3 { margin: 0 0 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rh-ink-3); font-weight: 700; }
.rh-rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rh-rail-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--rh-ink-2); }
.rh-rail-list b { font-family: var(--rh-mono); color: var(--rh-ink); }
.rh-links { display: grid; gap: 8px; }
.rh-links a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border: 1px solid var(--rh-line); border-radius: 4px; font-size: 13px; color: var(--rh-ink-2); transition: all .16s ease; }
.rh-links a:hover { border-color: var(--rh-clay); color: var(--rh-clay); background: var(--rh-clay-soft); }
.rh-links a::after { content: "→"; font-family: var(--rh-mono); opacity: .5; }
.rh-rail-note { margin: 0; font-size: 12px; line-height: 1.8; color: var(--rh-ink-3); }

@media (max-width: 1020px) {
    .rh-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .rh-body { grid-template-columns: minmax(0, 1fr); }
    .rh-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rh-split { grid-template-columns: minmax(0, 1fr); }
    .rh-cost-stats { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    .rh-wrap { width: calc(100% - 28px); }
    .rh-hero { padding-top: 18px; padding-bottom: 38px; }
    .rh-intro h1 { font-size: 30px; }
    .rh-lede { font-size: 14px; }
    .rh-slip { padding: 18px 14px 16px; }
    .rh-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .rh-card { padding: 20px 16px; }
    .rh-kpi { grid-template-columns: 1fr; }
    .rh-cost-form { grid-template-columns: 1fr 1fr; }
    .rh-cost-stats { grid-template-columns: 1fr 1fr; }
    .rh-rail { grid-template-columns: minmax(0, 1fr); }
    .rh-slip-result { flex-wrap: wrap; }
    .rh-slip-side { text-align: left; }
}