/* =====================================================================
 * 工具8 · 公积金转移计算器 fund-transfer-calc.css
 * 独立设计：双城「资金管道」+ 时间线母题；主色公积金青蓝 #0e7490。
 * 深色适配走 [data-theme="dark"] 变量覆盖。
 * ===================================================================== */

.hc-gjj {
    --hc-a: #0e7490;
    --hc-a-soft: #e0f2f7;
    --gjj-a2: #14b8a6;
}

/* 首屏：左文右管道 */
.hc-gjj .gjj-hero {
    display: grid; grid-template-columns: 1.5fr 1fr;
    gap: 36px; align-items: center;
    padding-top: 44px;
}
.hc-gjj .hc-hero h1::after {
    content: ""; display: block; width: 64px; height: 5px; margin-top: 16px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--hc-a), var(--gjj-a2));
}

/* 管道图 */
.hc-gjj .gjj-pipe {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    padding-bottom: 10px;
}
.hc-gjj .gjj-city {
    width: min(100%, 230px);
    padding: 12px 18px;
    border-radius: 12px;
    text-align: center;
}
.hc-gjj .gjj-city b { display: block; font-size: 14.5px; letter-spacing: .06em; }
.hc-gjj .gjj-city em { font-style: normal; font-size: 11.5px; opacity: .85; }
.hc-gjj .gjj-city--a { background: linear-gradient(135deg, #0e7490, #14919b); color: #fff; box-shadow: 0 10px 26px rgba(14, 116, 144, .3); }
.hc-gjj .gjj-city--b { background: linear-gradient(135deg, #0f9d8f, #14b8a6); color: #fff; box-shadow: 0 10px 26px rgba(20, 184, 166, .3); }
.hc-gjj .gjj-pipe-line {
    position: relative;
    width: 10px; height: 58px;
    background: linear-gradient(180deg, var(--hc-a), var(--gjj-a2));
    border-radius: 0 0 5px 5px;
}
.hc-gjj .gjj-drop {
    position: absolute; left: 50%; bottom: -4px;
    width: 12px; height: 12px; margin-left: -6px;
    border-radius: 50%;
    background: var(--gjj-a2);
    box-shadow: 0 0 0 4px rgba(20, 184, 166, .25);
    animation: gjj-flow 1.8s ease-in infinite;
}
@keyframes gjj-flow {
    0% { transform: translateY(-46px) scale(.7); opacity: 0; }
    35% { opacity: 1; }
    100% { transform: translateY(0) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hc-gjj .gjj-drop { animation: none; opacity: 1; transform: none; }
}

/* 两地卡片 */
.hc-gjj .gjj-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hc-gjj .gjj-half { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hc-gjj .hc-card > .hc-card-head h3::before {
    content: ""; display: inline-block; width: 8px; height: 8px;
    margin-right: 8px; border-radius: 50%;
    background: var(--gjj-a2); vertical-align: 1px;
}

/* 时间线 */
.hc-gjj .gjj-timeline { list-style: none; margin: 0; padding: 0 !important; position: relative; }
.hc-gjj .gjj-timeline li {
    position: relative;
    padding: 0 0 18px 26px;
    border-left: 2px solid var(--hc-line);
    margin-left: 8px;
}
.hc-gjj .gjj-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.hc-gjj .gjj-timeline li::before {
    content: "";
    position: absolute; left: -7px; top: 2px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--hc-a);
    box-shadow: 0 0 0 3px var(--hc-a-soft);
}
.hc-gjj .gjj-timeline li b { display: block; font-size: 13.5px; color: var(--hc-a); }
.hc-gjj .gjj-timeline li span { font-size: 13px; color: var(--hc-ink-2); line-height: 1.8; }

/* 批量 */
.hc-gjj #gjjBatchBody td input[type="text"] { min-width: 90px; }
.hc-gjj #gjjBatchBody .gjj-del {
    border: none; background: transparent; color: var(--hc-muted);
    cursor: pointer; font-size: 15px; line-height: 1; padding: 4px 8px;
}
.hc-gjj #gjjBatchBody .gjj-del:hover { color: var(--hc-danger); }

/* 响应式 */
@media (max-width: 980px) {
    .hc-gjj .gjj-2col { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .hc-gjj .gjj-hero { grid-template-columns: 1fr; gap: 18px; padding-top: 26px; }
    .hc-gjj .gjj-pipe { flex-direction: row; padding-bottom: 0; }
    .hc-gjj .gjj-pipe-line { width: 58px; height: 10px; border-radius: 0 5px 5px 0; }
    .hc-gjj .gjj-drop { left: auto; top: 50%; bottom: auto; animation-name: gjj-flow-h; }
    @keyframes gjj-flow-h {
        0% { transform: translateX(-46px) scale(.7); opacity: 0; }
        35% { opacity: 1; }
        100% { transform: translateX(0) scale(1); opacity: 0; }
    }
}
@media (max-width: 560px) {
    .hc-gjj .gjj-half { grid-template-columns: 1fr; }
}

/* 深色主题 */
:root[data-theme="dark"] .hc-gjj {
    --hc-a: #4cc4e0;
    --hc-a-soft: #10333f;
    --gjj-a2: #2dd4bf;
}
:root[data-theme="dark"] .hc-gjj .gjj-city--a { background: linear-gradient(135deg, #0b5c73, #0e7490); }
:root[data-theme="dark"] .hc-gjj .gjj-city--b { background: linear-gradient(135deg, #0d7d72, #0f9484); }