/* =====================================================================
 * 工具9 · 社保补缴计算器 social-insurance-backpay.css
 * 独立设计：断缴月历格子 + 十字提醒母题；主色焦橙 #c2410c。
 * 深色适配走 [data-theme="dark"] 变量覆盖。
 * ===================================================================== */

.hc-si {
    --hc-a: #c2410c;
    --hc-a-soft: #fdeade;
    --si-gap: #e9946b;
}

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

/* 月历格子 */
.hc-si .si-months {
    width: min(100%, 300px);
    margin: 0 auto;
    background: var(--hc-card);
    border: 1px solid var(--hc-line-2);
    border-radius: var(--hc-r);
    padding: 18px 20px 14px;
    box-shadow: var(--hc-shadow-sm);
}
.hc-si .si-months-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 700; color: var(--hc-ink-2);
    margin-bottom: 12px;
}
.hc-si .si-months-head::before {
    content: "✚"; color: var(--hc-a); font-size: 15px;
}
.hc-si .si-months-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px;
}
.hc-si .si-months-grid span {
    display: grid; place-items: center;
    aspect-ratio: 1;
    border-radius: 8px;
    font-family: var(--hc-serif); font-size: 12.5px; font-weight: 700;
    background: var(--hc-a-soft); color: var(--hc-a);
}
.hc-si .si-months-grid span.is-gap {
    background: transparent;
    border: 2px dashed var(--si-gap);
    color: var(--si-gap);
    text-decoration: line-through;
    opacity: .85;
}
.hc-si .si-months-note { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 11px; color: var(--hc-muted); }
.hc-si .si-months-note i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; font-style: normal; }
.hc-si .si-months-note i.is-ok { background: var(--hc-a-soft); }
.hc-si .si-months-note i.is-gap { background: transparent; border: 1.5px dashed var(--si-gap); }

/* 输入 */
.hc-si .si-top-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hc-si .si-rates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 12px !important; }
.hc-si .si-rate {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--hc-line-2);
    border-radius: var(--hc-r-sm);
    background: var(--hc-card-2);
    font-size: 13px;
}
.hc-si .si-rate b { color: var(--hc-a); min-width: 34px; }
.hc-si .si-rate label { display: flex; align-items: center; gap: 5px; color: var(--hc-muted); font-size: 12px; }
.hc-si .si-rate input { width: 64px !important; padding: 5px 8px !important; font-size: 13px !important; }

/* 清单 */
.hc-si .si-2col { display: grid; grid-template-columns: 1fr; }
.hc-si .si-checklist { list-style: none; margin: 0; }
.hc-si .si-checklist li {
    position: relative;
    padding: 6px 0 6px 26px;
    font-size: 13.5px; line-height: 1.8; color: var(--hc-ink-2);
}
.hc-si .si-checklist li::before {
    content: "✓";
    position: absolute; left: 0; top: 7px;
    width: 17px; height: 17px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--hc-a-soft);
    color: var(--hc-a);
    font-size: 11px; font-weight: 800;
}
.hc-si .si-checklist li b { color: var(--hc-ink); margin-right: 4px; }

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

/* 响应式 */
@media (max-width: 980px) {
    .hc-si .si-top-grid { grid-template-columns: 1fr 1fr; }
    .hc-si .si-rates { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .hc-si .si-hero { grid-template-columns: 1fr; gap: 18px; padding-top: 26px; }
}
@media (max-width: 560px) {
    .hc-si .si-top-grid { grid-template-columns: 1fr; }
}

/* 深色主题 */
:root[data-theme="dark"] .hc-si {
    --hc-a: #f0906a;
    --hc-a-soft: #38221a;
    --si-gap: #e9946b;
}