/* ============================================================
   employer-benefit-compare-calc.css · 雇主福利折现与跳槽实际收益对比器
   设计语言：天平对账 —— 深海松石底 + 铜橙砝码线 + 双栏对账卡
   作用域：.ebp-page（必须与 Blade 根元素 class 一致）
   ============================================================ */

.ebp-page {
    --neo-accent: #0f5a56;
    --neo-accent-2: #b06a34;
    --neo-grad: linear-gradient(135deg, #0a2a2a 0%, #0f5a56 54%, #b06a34 138%);

    --ebp-teal: #0f5a56;
    --ebp-teal-soft: rgba(15, 90, 86, .09);
    --ebp-copper: #a85f2a;
    --ebp-copper-soft: rgba(168, 95, 42, .10);
    --ebp-line: rgba(15, 90, 86, .16);
    --ebp-paper: #fbfaf4;
    --ebp-good: #157a56;
    --ebp-warn: #b45309;
    --ebp-bad: #b3261e;
    --ebp-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
}

[data-theme="dark"] .ebp-page {
    --neo-accent: #6fd3c7;
    --neo-accent-2: #e8b06a;
    --neo-grad: linear-gradient(135deg, #05191a 0%, #0d3f3c 48%, #8a4f22 132%);

    --ebp-teal: #6fd3c7;
    --ebp-teal-soft: rgba(111, 211, 199, .12);
    --ebp-copper: #e8b06a;
    --ebp-copper-soft: rgba(232, 176, 106, .12);
    --ebp-line: rgba(111, 211, 199, .22);
    --ebp-paper: rgba(255, 255, 255, .035);
    --ebp-good: #4ade80;
    --ebp-warn: #fbbf24;
    --ebp-bad: #f87171;
}

/* ============================================================
   首屏
   ============================================================ */
.ebp-hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 28px 30px 16px;
    margin-bottom: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 118%, rgba(232, 176, 106, .28), transparent 46%),
        radial-gradient(circle at 86% -10%, rgba(111, 211, 199, .22), transparent 52%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 54px),
        linear-gradient(116deg, #071f20 0%, #0d3f3c 48%, #12332f 74%, #7a4620 122%);
    box-shadow: 0 26px 60px -28px rgba(4, 22, 22, .72);
    border: 1px solid rgba(232, 176, 106, .22);
}
.ebp-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 26px;
    align-items: start;
}
.ebp-kicker {
    display: inline-block;
    font-size: 11px;
    letter-spacing: 2.6px;
    font-weight: 700;
    color: #f0c894;
    border-bottom: 1px solid rgba(240, 200, 148, .45);
    padding-bottom: 5px;
    margin-bottom: 12px;
}
.ebp-hero h1 {
    margin: 0 0 10px;
    font-size: 27px;
    line-height: 1.3;
    letter-spacing: .5px;
    color: #fff;
}
.ebp-lead {
    margin: 0;
    max-width: 650px;
    font-size: 14px;
    line-height: 1.85;
    color: rgba(255, 255, 255, .87);
}
.ebp-lead b { color: #ffd9a8; font-weight: 700; }
.ebp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}
.ebp-chips li {
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 4px;
    color: rgba(255, 255, 255, .84);
    background: rgba(255, 255, 255, .07);
    border-left: 2px solid rgba(232, 176, 106, .7);
}
.ebp-hero-foot {
    margin: 13px 0 0;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .52);
}
.ebp-hero-note {
    position: relative;
    z-index: 1;
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 11.5px;
    color: rgba(255, 255, 255, .55);
    font-family: var(--ebp-mono);
}

/* 天平速览 */
.ebp-verdict {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    padding: 14px 14px 12px;
    border-radius: 15px;
    background: linear-gradient(168deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}
.ebp-side { text-align: center; min-width: 0; }
.ebp-side-k {
    display: block;
    font-size: 10.5px;
    color: rgba(255, 255, 255, .6);
    white-space: nowrap;
}
.ebp-side b {
    display: block;
    margin-top: 4px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ebp-side--new b { color: #ffd9a8; }
.ebp-vs {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 10.5px;
    font-weight: 800;
    color: #0d2b28;
    background: linear-gradient(140deg, #f0c894, #c98b4d);
    text-align: center;
    line-height: 1.1;
    padding: 2px;
    white-space: nowrap;
    overflow: hidden;
}
.ebp-verdict-foot {
    grid-column: 1 / -1;
    margin-top: 9px;
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    text-align: center;
}
.ebp-verdict-foot span {
    display: block;
    font-size: 10.5px;
    color: rgba(255, 255, 255, .58);
}
.ebp-verdict-foot strong {
    display: block;
    margin-top: 2px;
    font-size: 21px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.ebp-verdict-foot strong.is-good { color: #9ff0d3; }
.ebp-verdict-foot strong.is-bad { color: #ffb4a8; }
.ebp-verdict-foot em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 11px;
    color: rgba(255, 255, 255, .66);
    line-height: 1.5;
}
.ebp-cta {
    grid-column: 1 / -1;
    display: block;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #22160a;
    background: linear-gradient(120deg, #f0c894, #d3974f);
    text-decoration: none;
    transition: transform .16s, box-shadow .16s;
}
.ebp-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(232, 176, 106, .85); }

/* ============================================================
   表单
   ============================================================ */
.ebp-page .neo-card-title .neo-ic {
    background: var(--ebp-teal-soft);
    color: var(--ebp-teal);
    border: 1px solid var(--ebp-line);
}
.ebp-page .neo-input:focus,
.ebp-page .neo-select:focus {
    border-color: var(--ebp-copper);
    box-shadow: 0 0 0 4px var(--ebp-copper-soft);
}
.ebp-page .neo-btn {
    background: linear-gradient(135deg, #0d3f3c, #0f5a56 58%, #a85f2a 132%);
    box-shadow: 0 10px 22px -12px rgba(15, 90, 86, .8);
}
.ebp-hint {
    display: block;
    margin: 7px 0 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--neo-text-faint);
}

/* 两家现金包 */
.ebp-firm {
    border: 1px solid var(--ebp-line);
    border-radius: 12px;
    padding: 11px 12px 12px;
    margin-bottom: 12px;
    background: var(--ebp-paper);
}
[data-theme="dark"] .ebp-firm { background: rgba(255, 255, 255, .03); }
.ebp-firm:last-of-type { margin-bottom: 0; }
.ebp-firm-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--neo-text);
    margin-bottom: 9px;
    letter-spacing: .3px;
}
.ebp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ebp-teal);
    box-shadow: 0 0 0 3px var(--ebp-teal-soft);
}
.ebp-firm--new .ebp-dot { background: var(--ebp-copper); box-shadow: 0 0 0 3px var(--ebp-copper-soft); }

/* 福利表 */
.ebp-bhead,
.ebp-brow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px 74px 54px 22px;
    gap: 5px;
    align-items: center;
}
.ebp-brow input[type="number"]::-webkit-outer-spin-button,
.ebp-brow input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ebp-brow input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.ebp-bhead {
    font-size: 10px;
    color: var(--neo-text-faint);
    padding: 0 2px 5px;
    text-align: center;
}
.ebp-bhead span:first-child { text-align: left; }
.ebp-benefits { display: flex; flex-direction: column; gap: 6px; }
.ebp-brow input {
    width: 100%;
    padding: 6px 7px;
    font-family: inherit;
    font-size: 12px;
    color: var(--neo-text);
    background: var(--neo-surface-solid);
    border: 1.5px solid var(--neo-card-bd);
    border-radius: 7px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .16s, box-shadow .16s;
}
[data-theme="dark"] .ebp-brow input { background: rgba(255, 255, 255, .045); }
.ebp-brow input:focus { border-color: var(--ebp-copper); box-shadow: 0 0 0 3px var(--ebp-copper-soft); }
.ebp-brow input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.ebp-brow .ebp-b-name { font-weight: 600; }
.ebp-b-del {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ebp-bad);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    font-family: inherit;
}
.ebp-b-del:hover { background: color-mix(in srgb, var(--ebp-bad) 13%, transparent); }
.ebp-editor-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }

.ebp-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 12px; }
.ebp-preset {
    border: 1px solid var(--ebp-line);
    background: var(--ebp-paper);
    color: var(--neo-text);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 999px;
    cursor: pointer;
    transition: all .16s;
}
.ebp-preset:hover { border-color: var(--ebp-copper); color: var(--ebp-copper); transform: translateY(-1px); }
.ebp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ebp-err {
    margin-top: 11px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--ebp-bad);
    background: color-mix(in srgb, var(--ebp-bad) 10%, transparent);
    border-left: 3px solid var(--ebp-bad);
}

/* ============================================================
   结果
   ============================================================ */
.ebp-banner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 13px 15px;
    border-radius: 12px;
    border: 1px solid var(--ebp-line);
    background: linear-gradient(120deg, var(--ebp-teal-soft), var(--ebp-copper-soft));
    margin-bottom: 14px;
}
.ebp-badge {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .6px;
    padding: 2px 9px;
    border-radius: 999px;
    color: #fff;
    background: var(--ebp-teal);
}
.ebp-badge.is-bad { background: var(--ebp-copper); }
.ebp-badge.is-flat { background: var(--neo-text-faint); }
.ebp-banner strong {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--neo-text);
    font-variant-numeric: tabular-nums;
    margin-top: 3px;
}
.ebp-banner small { font-size: 11.5px; color: var(--neo-text-faint); }

.ebp-page .neo-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ebp-page .neo-metric { padding: 11px 12px; }
.ebp-page .neo-metric .k { display: block; font-size: 11.5px; margin-bottom: 4px; white-space: nowrap; }
.ebp-page .neo-metric .v {
    display: block;
    font-size: 15px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.ebp-subhead {
    margin: 20px 0 9px;
    padding-left: 9px;
    font-size: 13.5px;
    font-weight: 700;
    border-left: 3px solid var(--ebp-copper);
    line-height: 1.4;
}

/* 四项口径对比条 */
.ebp-bars { display: flex; flex-direction: column; gap: 12px; }
.ebp-bar-row { display: flex; flex-direction: column; gap: 4px; }
.ebp-bar-k {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--neo-text-soft);
}
.ebp-bar-k b { font-variant-numeric: tabular-nums; color: var(--neo-text); }
.ebp-bar-line {
    position: relative;
    height: 9px;
    border-radius: 999px;
    background: var(--ebp-teal-soft);
    overflow: hidden;
}
.ebp-bar-line i {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.ebp-bar-line i.is-old { background: linear-gradient(90deg, #0f5a56, #2f8d84); }
.ebp-bar-line i.is-new { background: linear-gradient(90deg, #c07a3d, #e0a463); }
[data-theme="dark"] .ebp-bar-line i.is-old { background: linear-gradient(90deg, #2f8d84, #6fd3c7); }
[data-theme="dark"] .ebp-bar-line i.is-new { background: linear-gradient(90deg, #b06a34, #e8b06a); }

/* 表格 */
.ebp-table-wrap { overflow-x: auto; border-radius: 11px; }
.ebp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ebp-table th, .ebp-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--neo-card-bd);
    white-space: nowrap;
}
.ebp-table th {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--neo-text-faint);
    background: var(--ebp-teal-soft);
}
.ebp-table tbody tr:hover { background: color-mix(in srgb, var(--ebp-teal) 6%, transparent); }
.ebp-table .is-num { text-align: right; font-family: var(--ebp-mono); }
.ebp-table .is-good { color: var(--ebp-good); font-weight: 700; }
.ebp-table .is-bad { color: var(--ebp-bad); font-weight: 700; }
.ebp-table tfoot td { font-weight: 700; background: var(--ebp-teal-soft); }
.ebp-empty { text-align: center; color: var(--neo-text-faint); padding: 16px 10px !important; }

/* 结论 */
.ebp-facts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.ebp-fact {
    padding: 10px 13px;
    border-radius: 9px;
    font-size: 12.8px;
    line-height: 1.78;
    color: var(--neo-text-soft);
    background: var(--neo-surface-solid);
    border: 1px solid var(--neo-card-bd);
    border-left: 3px solid var(--ebp-teal);
}
[data-theme="dark"] .ebp-fact { background: rgba(255, 255, 255, .035); }
.ebp-fact b { color: var(--neo-text); }
.ebp-fact.f-good { border-left-color: var(--ebp-good); }
.ebp-fact.f-warn { border-left-color: var(--ebp-warn); }
.ebp-fact.f-bad { border-left-color: var(--ebp-bad); }
.ebp-fact.f-info { border-left-color: var(--ebp-copper); }

.ebp-tips { display: flex; flex-direction: column; gap: 9px; }
.ebp-tips p {
    margin: 0;
    font-size: 12.8px;
    line-height: 1.85;
    color: var(--neo-text-soft);
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--ebp-paper);
    border: 1px dashed var(--ebp-line);
}
[data-theme="dark"] .ebp-tips p { background: rgba(255, 255, 255, .03); }
.ebp-tips b { color: var(--neo-text); }
.ebp-summary {
    margin-top: 11px;
    padding: 13px 15px;
    border-radius: 10px;
    border: 1px dashed var(--ebp-line);
    background: var(--ebp-copper-soft);
    font-size: 12.5px;
    line-height: 1.95;
    color: var(--neo-text-soft);
    white-space: pre-wrap;
    font-family: var(--ebp-mono);
}

/* ============================================================
   区块
   ============================================================ */
.ebp-block { margin-top: 20px; }
.ebp-block-lead {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.85;
    color: var(--neo-text-soft);
}
.ebp-cmp-empty {
    margin-top: 12px;
    padding: 20px 14px;
    text-align: center;
    font-size: 12.5px;
    color: var(--neo-text-faint);
    border: 1.5px dashed var(--neo-card-bd);
    border-radius: 11px;
}
.ebp-cmp td, .ebp-cmp th { white-space: normal; }
.ebp-cmp .cmp-name { font-weight: 700; color: var(--neo-text-soft); }
.ebp-cmp .cmp-del {
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--ebp-bad);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 5px;
}
.ebp-cmp .cmp-del:hover { background: color-mix(in srgb, var(--ebp-bad) 12%, transparent); }

.ebp-note-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ebp-note-table th, .ebp-note-table td {
    text-align: left;
    vertical-align: top;
    padding: 10px 12px;
    line-height: 1.8;
    border-bottom: 1px solid var(--neo-card-bd);
}
.ebp-note-table th { width: 96px; white-space: nowrap; font-weight: 700; color: var(--neo-text); }
.ebp-note-table td { color: var(--neo-text-soft); }
.ebp-note-table tr:last-child th, .ebp-note-table tr:last-child td { border-bottom: 0; }
.ebp-note-table td b { color: var(--neo-text); }

.ebp-steps { padding-left: 20px; margin: 0; }
.ebp-steps li { margin-bottom: 8px; }

#ebpCalc { scroll-margin-top: 92px; }

/* ============================================================
   A4 对账单
   ============================================================ */
.ebp-sheet { display: none; }

@media print {
    @page { margin: 14mm; }
    body > *:not(#ebpSheet) { display: none !important; }
    html, body { height: auto !important; background: #fff !important; }
    .ebp-sheet {
        display: block !important;
        position: static !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #000 !important;
        background: #fff !important;
        font-size: 12px;
        line-height: 1.7;
    }
    .ebp-sheet h1 { font-size: 19px; margin: 0 0 4px; }
    .ebp-sheet .meta { font-size: 10.5px; color: #444; margin-bottom: 10px; }
    .ebp-sheet h2 { font-size: 13.5px; margin: 14px 0 6px; }
    .ebp-sheet table { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
    .ebp-sheet th, .ebp-sheet td { border: 1px solid #999; padding: 4px 7px; text-align: left; }
    .ebp-sheet th { background: #eee; }
    .ebp-sheet .num { text-align: right; }
    .ebp-sheet .foot { font-size: 10px; color: #555; border-top: 1px solid #999; padding-top: 7px; margin-top: 8px; }
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 1080px) {
    .ebp-hero-grid { grid-template-columns: 1fr; }
    .ebp-verdict { max-width: 420px; }
}
@media (max-width: 900px) {
    .ebp-hero { padding: 22px 18px 14px; }
    .ebp-hero h1 { font-size: 22px; }
    .ebp-note-table th { width: 80px; font-size: 12.5px; }
}
@media (max-width: 560px) {
    .ebp-verdict { max-width: none; }
    .ebp-verdict-foot strong { font-size: 19px; }
    .ebp-page .neo-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ebp-bhead, .ebp-brow { grid-template-columns: minmax(0, 1fr) 66px 66px 44px 20px; gap: 4px; }
    .ebp-brow input { font-size: 11.5px; padding: 6px 5px; }
    .ebp-note-table th { display: block; width: auto; border-bottom: 0; }
    .ebp-note-table td { display: block; padding-top: 0; }
}