:root {
    --recon-bg-color: #f9fafb;
    --recon-border-color: #e5e7eb;
    --recon-label-color: #6b7280;
    --recon-input-bg: #ffffff;
}

#reconciliationBar {
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    flex-wrap: wrap;
    /* Убраны стили рамки, отступов и паддингов, так как они теперь управляются родительской панелью */
}

.reconciliation-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reconciliation-group label {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--recon-label-color);
    padding-left: 15px; /* Align with input text padding */
}

.reconciliation-group input[type="number"] {
    font-size: 1.1em;
    font-weight: 500;
    padding: 10px 15px;
    border: 1px solid var(--recon-border-color);
    border-radius: 16px;
    background-color: var(--recon-input-bg);
    width: 200px;
    transition: border-color 0.2s, box-shadow 0.2s;
    -moz-appearance: textfield;
}
.reconciliation-group input[type="number"]::-webkit-outer-spin-button,
.reconciliation-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.reconciliation-group input[type="number"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(74, 108, 253, 0.2);
}

.reconciliation-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

#reconciliationSaveBtn {
    padding: 12px 25px;
}

.reconciliation-status-text {
    font-size: 0.9em;
    font-weight: 500;
    min-width: 150px;
    text-align: left;
    transition: opacity 0.3s;
}

.reconciliation-status-text.status-loading { color: var(--accent-color); }
.reconciliation-status-text.status-success { color: var(--success-color); }
.reconciliation-status-text.status-error { color: #e74c3c; }

@media (max-width: 900px) {
    #reconciliationBar {
        flex-direction: column;
        align-items: flex-end; /* Changed from stretch to flex-end */
        gap: 1rem;
    }

    /* Правило для отступа больше не нужно в вертикальном макете */
    #reconciliationBar .reconciliation-group:nth-of-type(2) {
        margin-right: 0;
    }

    .reconciliation-group input[type="number"] {
        width: 100%;
    }
    .reconciliation-actions {
        padding-top: 0;
        flex-direction: column;
        align-items: flex-end; /* Changed from flex-start to flex-end */
        width: 100%;
    }
}