/* ==========================================================================
   晋升与跳槽五年收入模拟器
   设计语言：地铁线路图 / 分岔（墨绿 + 荧光绿 + 琥珀）
   作用域：.jh-page（变量 jh- 前缀）
   ========================================================================== */

.jh-page {
    --jh-bg: #f2f6f3;
    --jh-card: #ffffff;
    --jh-ink: #0f231d;
    --jh-ink-2: #47605a;
    --jh-ink-3: #7d938c;
    --jh-line: #d9e6e0;
    --jh-line-2: #ebf3ef;
    --jh-green: #0b3d33;
    --jh-green-2: #146b56;
    --jh-green-soft: #e3f4ec;
    --jh-neon: #6ee7a8;
    --jh-amber: #d98a2b;
    --jh-amber-soft: #fdf1e0;
    --jh-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

    background:
        radial-gradient(620px 320px at 96% -4%, rgba(110, 231, 168, .1), transparent 62%),
        var(--jh-bg);
    color: var(--jh-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    line-height: 1.76;
    -webkit-font-smoothing: antialiased;
}

:root[data-theme="dark"] .jh-page {
    --jh-bg: #08120f;
    --jh-card: #101d18;
    --jh-ink: #e6f4ed;
    --jh-ink-2: #a1b8af;
    --jh-ink-3: #6f8a80;
    --jh-line: #1d3129;
    --jh-line-2: #16241e;
    --jh-green: #7ce0b0;
    --jh-green-2: #9cecc5;
    --jh-green-soft: #112a21;
    --jh-neon: #6ee7a8;
    --jh-amber: #e8b163;
    --jh-amber-soft: #2a2011;
    background:
        radial-gradient(620px 320px at 96% -4%, rgba(110, 231, 168, .07), transparent 62%),
        var(--jh-bg);
}

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

/* ---------- 首屏 ---------- */
.jh-hero {
    position: relative;
    overflow: hidden;
    padding: 26px 0 52px;
    color: #e8f6ef;
    background:
        radial-gradient(620px 340px at 88% -8%, rgba(110, 231, 168, .22), transparent 62%),
        linear-gradient(160deg, #07231c 0%, #0d3a2e 58%, #061c16 100%);
}

.jh-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(110, 231, 168, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110, 231, 168, .06) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(720px 420px at 20% 10%, #000, transparent 76%);
    pointer-events: none;
}

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

.jh-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
.jh-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(232, 246, 239, .55); }
.jh-crumb a { color: rgba(232, 246, 239, .82); }
.jh-crumb a:hover { color: var(--jh-neon); }
.jh-crumb i { font-style: normal; opacity: .45; }
.jh-crumb b { color: #fff; font-weight: 600; }

.jh-modes { display: inline-flex; padding: 3px; border: 1px solid rgba(232, 246, 239, .2); border-radius: 999px; background: rgba(255, 255, 255, .05); }
.jh-modes button { border: 0; background: transparent; color: rgba(232, 246, 239, .72); font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.jh-modes button.is-on { background: var(--jh-neon); color: #07231c; font-weight: 700; }

.jh-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 40px; align-items: start; }

.jh-kicker { margin: 0 0 12px; font-family: var(--jh-mono); font-size: 11px; letter-spacing: .2em; color: var(--jh-neon); font-weight: 700; }
.jh-intro h1 { margin: 0 0 14px; font-size: clamp(30px, 3.7vw, 46px); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.jh-intro h1 em { font-style: normal; color: var(--jh-neon); }
.jh-lede { margin: 0 0 18px; max-width: 32em; font-size: 14.5px; line-height: 1.95; color: rgba(232, 246, 239, .72); }
.jh-lede strong { color: #fff; }

.jh-chips { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.jh-chips li { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: rgba(232, 246, 239, .72); }
.jh-chips b { flex: none; min-width: 34px; text-align: center; padding: 1px 6px; border: 1px solid rgba(110, 231, 168, .42); border-radius: 3px; color: var(--jh-neon); font-size: 11.5px; }

.jh-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jh-presets > span { font-size: 12.5px; color: rgba(232, 246, 239, .5); }
.jh-presets button { font: inherit; font-size: 12.5px; padding: 7px 12px; border-radius: 6px; border: 1px solid rgba(232, 246, 239, .24); background: transparent; color: rgba(232, 246, 239, .84); cursor: pointer; }
.jh-presets button:hover,
.jh-presets button.is-on { border-color: var(--jh-neon); background: rgba(110, 231, 168, .14); color: #fff; }

/* ---------- 参数面板 ---------- */
.jh-panel { background: #f7fbf8; color: var(--jh-ink); border-radius: 14px; padding: 18px 20px 16px; box-shadow: 0 34px 64px -46px rgba(0, 0, 0, .8); }
.jh-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--jh-line); }
.jh-panel-head h2 { margin: 0; font-size: 16px; font-weight: 800; }
.jh-panel-tag { font-family: var(--jh-mono); font-size: 9.5px; letter-spacing: .1em; padding: 2px 7px; border-radius: 3px; background: var(--jh-green-soft); color: var(--jh-green-2); }

.jh-lane { margin-top: 12px; padding: 10px 12px 12px; border: 1px solid var(--jh-line); border-radius: 9px; background: #fff; }
.jh-lane.is-b { border-color: rgba(217, 138, 43, .45); }
.jh-lane-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--jh-ink-2); }
.jh-lane-head i { width: 9px; height: 9px; border-radius: 50%; }
.dot-a { background: var(--jh-green-2); box-shadow: 0 0 0 3px rgba(20, 107, 86, .14); }
.dot-b { background: var(--jh-amber); box-shadow: 0 0 0 3px rgba(217, 138, 43, .16); }

.jh-fields { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px 10px; margin-top: 8px; }
.jh-field { display: grid; gap: 2px; min-width: 0; }
.jh-field > span { font-size: 10.5px; color: var(--jh-ink-3); }
.jh-field .jh-input { display: flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--jh-line); border-radius: 5px; background: #f7fbf8; }
.jh-field .jh-input:focus-within { border-color: var(--jh-green-2); box-shadow: 0 0 0 3px rgba(20, 107, 86, .12); }
.jh-field input { width: 100%; min-width: 0; border: 0; outline: none; background: transparent; color: #0f231d; font: inherit; font-family: var(--jh-mono); font-size: 12.5px; padding: 6px 0; font-variant-numeric: tabular-nums; }
.jh-page .jh-field input { background: transparent; color: #0f231d; -webkit-text-fill-color: #0f231d; }
:root[data-theme="dark"] .jh-field input { color: #e6f4ed; -webkit-text-fill-color: #e6f4ed; }
:root[data-theme="dark"] .jh-panel { background: #0f1c17; box-shadow: inset 0 0 0 1px rgba(110, 231, 168, .16), 0 34px 64px -46px rgba(0, 0, 0, .9); }
:root[data-theme="dark"] .jh-lane { background: #13221c; }
:root[data-theme="dark"] .jh-field .jh-input { background: #0b1712; }
.jh-field em { flex: none; font-style: normal; font-size: 9.5px; color: var(--jh-ink-3); }

.jh-summary { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--jh-line); }
.jh-summary > div:last-child { text-align: right; }
.jh-summary > div > span { display: block; font-size: 10.5px; color: var(--jh-ink-3); }
.jh-summary b { display: block; font-family: var(--jh-mono); font-size: 19px; font-variant-numeric: tabular-nums; }
.jh-summary b span { display: inline; font: inherit; color: inherit; }
.jh-summary > div:first-child b { color: var(--jh-green-2); }
.jh-summary > div:last-child b { color: var(--jh-amber); }
.jh-summary-mid { text-align: center; }
.jh-summary-mid b { font-size: 14px; }

.jh-note { margin: 9px 0 0; font-size: 11px; line-height: 1.6; color: var(--jh-ink-3); }

/* ---------- 正文 ---------- */
.jh-body { display: grid; grid-template-columns: minmax(0, 1fr) 284px; gap: 28px; padding: 34px 0 30px; align-items: start; }
.jh-main { display: grid; gap: 18px; min-width: 0; }
.jh-main > * { min-width: 0; }
.jh-card { background: var(--jh-card); border: 1px solid var(--jh-line); border-radius: 12px; padding: 22px 24px; }
.jh-card-head { margin-bottom: 12px; }
.jh-card-head h2 { margin: 0; font-size: 17.5px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jh-card-head h2 i { display: inline-grid; place-items: center; width: 26px; height: 24px; border-radius: 4px; background: var(--jh-green-soft); color: var(--jh-green-2); font-style: normal; font-family: var(--jh-mono); font-size: 11px; font-weight: 700; }
.jh-card-head p { margin: 6px 0 0; font-size: 12.5px; color: var(--jh-ink-3); }

.jh-map { margin-top: 16px; display: grid; gap: 18px; }
.jh-line { display: flex; align-items: center; gap: 12px; }
.jh-line-label { flex: none; width: 42px; font-size: 12px; font-weight: 700; }
.jh-line-label.is-a { color: var(--jh-green-2); }
.jh-line-label.is-b { color: var(--jh-amber); }
.jh-stations { position: relative; flex: 1; display: flex; justify-content: space-between; gap: 4px; padding-top: 14px; }
.jh-stations::before { content: ""; position: absolute; left: 6%; right: 6%; top: 20px; height: 3px; border-radius: 2px; background: var(--jh-line); }
.jh-stations[data-line="a"]::before { background: linear-gradient(90deg, var(--jh-green-2), var(--jh-neon)); }
.jh-stations[data-line="b"]::before { background: linear-gradient(90deg, var(--jh-amber), #f3c078); }
.jh-station { position: relative; z-index: 1; flex: 1; text-align: center; min-width: 0; }
.jh-station-year { display: block; font-family: var(--jh-mono); font-size: 9px; color: var(--jh-ink-3); }
.jh-dot { display: block; width: 11px; height: 11px; margin: 3px auto 4px; border-radius: 50%; background: var(--jh-card); border: 3px solid var(--jh-green-2); }
.jh-stations[data-line="b"] .jh-dot { border-color: var(--jh-amber); }
.jh-station b { display: block; font-family: var(--jh-mono); font-size: 10.5px; color: var(--jh-ink); white-space: nowrap; }
.jh-station em { display: block; font-style: normal; font-size: 9px; color: var(--jh-ink-3); }
.jh-tip { margin: 12px 0 0; font-size: 11.5px; line-height: 1.7; color: var(--jh-ink-3); }

.jh-cum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.jh-cum > div { border: 1px solid var(--jh-line); border-radius: 8px; padding: 9px 11px; }
.jh-cum span { display: block; font-size: 10.5px; color: var(--jh-ink-3); }
.jh-cum b { display: block; margin-top: 2px; font-family: var(--jh-mono); font-size: 15px; font-variant-numeric: tabular-nums; }

.jh-risk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.jh-risk > div { border: 1px solid var(--jh-line); border-radius: 8px; padding: 9px 11px; background: linear-gradient(180deg, var(--jh-green-soft), transparent 160%); }
.jh-risk span { display: block; font-size: 10.5px; color: var(--jh-ink-3); }
.jh-risk b { display: block; margin-top: 2px; font-family: var(--jh-mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.jh-risk b span { display: inline; font: inherit; color: inherit; }

.jh-table-wrap { margin-top: 12px; overflow-x: auto; border: 1px solid var(--jh-line); border-radius: 8px; }
.jh-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 12.5px; }
.jh-table th, .jh-table td { padding: 9px 11px; text-align: right; border-bottom: 1px solid var(--jh-line-2); white-space: nowrap; }
.jh-table th { background: var(--jh-bg); color: var(--jh-ink-2); font-size: 11.5px; font-weight: 600; }
.jh-table th:first-child, .jh-table td:first-child { text-align: left; }
.jh-table td { font-family: var(--jh-mono); font-variant-numeric: tabular-nums; }
.jh-table tbody tr:last-child td { border-bottom: 0; }
.jh-table tr.is-cross td { background: var(--jh-green-soft); }
.jh-table tr.is-bad td:last-child { color: var(--jh-amber); }

.jh-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.jh-checklist > div { border: 1px solid var(--jh-line); border-left: 3px solid var(--jh-green-2); border-radius: 6px; padding: 9px 12px; }
.jh-checklist b { display: block; font-size: 12.5px; }
.jh-checklist span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.7; color: var(--jh-ink-3); }

.jh-formula { margin-top: 12px; padding: 12px 14px; border: 1px dashed var(--jh-line); border-radius: 8px; background: var(--jh-bg); font-family: var(--jh-mono); font-size: 11.5px; line-height: 1.95; color: var(--jh-ink-2); overflow-x: auto; }
.jh-notes { display: grid; gap: 9px; margin-top: 12px; }
.jh-notes > div { padding: 11px 13px; border-radius: 7px; background: var(--jh-bg); border-left: 3px solid var(--jh-green-2); font-size: 12.5px; color: var(--jh-ink-2); }
.jh-notes b { color: var(--jh-ink); }

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

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

@media (max-width: 1020px) {
    .jh-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .jh-body { grid-template-columns: minmax(0, 1fr); }
    .jh-rail { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jh-fields { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
    .jh-wrap { width: calc(100% - 28px); }
    .jh-intro h1 { font-size: 28px; }
    .jh-panel { padding: 14px 12px; }
    .jh-card { padding: 18px 14px; }
    .jh-cum { grid-template-columns: 1fr 1fr; }
    .jh-risk { grid-template-columns: 1fr 1fr; }
    .jh-checklist { grid-template-columns: minmax(0, 1fr); }
    .jh-rail { grid-template-columns: minmax(0, 1fr); }
    .jh-station b { font-size: 9.5px; }
    .jh-station-year { font-size: 8px; }
    .jh-line { gap: 6px; }
    .jh-line-label { width: 32px; font-size: 11px; }
    .jh-summary { grid-template-columns: 1fr; }
    .jh-summary > div:last-child { text-align: left; }
    .jh-summary-mid { text-align: left; }
}