/* LPR 房贷重定价测算 · 专有样式
   基础类（card / field / grid-2 / seg / btn / result-grid / metric / tip-box）
   全部复用 /public/vendor/life-calc/life-calc.css，本文件只写本工具专有的部分。 */

#app .lc-pay-grid {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--border);
}

#app .lc-lead {
    margin: 0 0 14px;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* 表单内的行内说明，占位在 label 下方保持多列表单对齐 */
#app .lc-inline-tip {
    padding: 9px 12px;
    border-radius: var(--radius);
    background: var(--primary-light);
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.65;
}

#app .lc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

#app .lc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    white-space: nowrap;
}

#app .lc-table th,
#app .lc-table td {
    padding: 10px 14px;
    text-align: right;
    border-bottom: 1px solid var(--border);
}

#app .lc-table th:first-child,
#app .lc-table td:first-child {
    text-align: left;
}

#app .lc-table th {
    background: var(--primary-light);
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
}

#app .lc-table tbody tr:last-child td {
    border-bottom: none;
}

#app .lc-table tbody tr:hover {
    background: var(--success-bg);
}

#app .lc-table tr.is-current td {
    background: var(--warning-bg);
    font-weight: 500;
}

#app .lc-table tr.is-current td:first-child::after {
    content: "当前";
    display: inline-block;
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--warning);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 500;
    vertical-align: 1px;
}

#app .lc-table td .lc-dim {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* 月供减少 = 省钱（绿），月供增加 = 多还（红）。
   这里是房贷而非股票行情，按通用财务直觉配色，不适用 A 股红涨绿跌。 */
#app .lc-down {
    color: var(--success);
}

#app .lc-up {
    color: var(--danger);
}

#app .lc-table td.lc-down,
#app .lc-table td.lc-up {
    font-weight: 500;
}

#app .lc-table .lc-num {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    #app .lc-table th,
    #app .lc-table td {
        padding: 9px 10px;
        font-size: 0.85rem;
    }

    #app .lc-pay-grid {
        margin-top: 12px;
        padding-top: 12px;
    }
}