#view-reconcile { --rec-danger: #a1261b; --rec-danger-bg: #fff1ef; --rec-secondary: #626266; }
.rec-intro { margin: 0 0 24px; color: var(--ink-secondary); max-width: 72ch; }
.rec-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.rec-input { min-width: 0; }
.rec-input-heading, .rec-result-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.rec-input h3, .rec-results h3 { margin: 0; font-size: 21px; font-weight: 600; }
.rec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rec-input > p { margin: 10px 0; color: var(--rec-secondary); font-size: 14px; }
.rec-input textarea { display: block; min-height: 220px; tab-size: 16; font-size: 15px; line-height: 1.6; font-variant-numeric: tabular-nums; caret-color: var(--primary); }
.rec-input textarea[aria-invalid="true"] { border-color: var(--rec-danger); }
.rec-input textarea::placeholder { color: var(--rec-secondary); }
.rec-input textarea::selection, .rec-table ::selection { background: var(--primary); color: var(--surface); }
.rec-input-stats { min-height: 21px; font-variant-numeric: tabular-nums; }
.rec-input > .rec-error, .rec-errors { color: var(--rec-danger); }
.rec-errors { margin: 12px 0; padding: 12px 12px 12px 30px; border: 1px solid var(--rec-danger); border-radius: 12px; background: var(--rec-danger-bg); font-size: 14px; overflow-wrap: anywhere; }
.rec-errors li + li { margin-top: 6px; }
.rec-format { margin: 8px 0 20px; max-width: 75ch; color: var(--rec-secondary); font-size: 14px; }
.rec-blank-option { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 20px; font-size: 14px; color: var(--ink); }
.rec-submit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rec-submit > span { margin-left: 8px; color: var(--rec-secondary); font-size: 13px; }
.rec-message { margin: 12px 0; min-height: 21px; color: var(--ink); font-size: 14px; }
.rec-results { margin-top: 32px; border-top: 1px solid var(--line); padding-top: 24px; min-width: 0; }
.rec-result-heading p { margin: 8px 0 0; color: var(--rec-secondary); font-size: 14px; font-variant-numeric: tabular-nums; }
.rec-filters { display: flex; flex-wrap: wrap; gap: 16px; margin: 24px 0 16px; }
.rec-filters label { width: min(100%, 240px); }
.rec-filters label:nth-child(2) { flex: 1; min-width: min(240px, 100%); max-width: 380px; }
.rec-table { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.rec-table table { width: 100%; min-width: 760px; }
.rec-table th { white-space: nowrap; }
.rec-table td { vertical-align: top; }
.rec-table .rec-number { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rec-table .rec-mismatch { background: var(--rec-danger-bg); }
.rec-table .rec-mismatch .rec-number:nth-child(4), .rec-table .rec-mismatch .rec-status { color: var(--rec-danger); font-weight: 600; }
.rec-model { max-width: 300px; overflow-wrap: anywhere; }
.rec-status { white-space: nowrap; }
.rec-table details { min-width: 150px; max-width: 250px; font-size: 13px; }
.rec-table summary { cursor: pointer; color: var(--primary); }
.rec-table details ul { max-height: 180px; overflow: auto; margin: 8px 0 0; padding-left: 18px; }
.rec-empty { padding: 28px 20px; text-align: center; color: var(--ink-secondary); }
.rec-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 16px; color: var(--rec-secondary); font-size: 14px; }
@media (max-width: 1100px) { .rec-inputs { gap: 20px; } .rec-input-heading { align-items: flex-start; flex-direction: column; } }
@media (max-width: 760px) { .rec-inputs { grid-template-columns: 1fr; gap: 24px; } .rec-input-heading { flex-direction: row; align-items: center; } .rec-submit > span { flex-basis: 100%; margin: 4px 0 0; } .rec-result-heading { align-items: flex-start; } .rec-input textarea { min-height: 185px; } }
@media (max-width: 420px) { .rec-input-heading { align-items: flex-start; flex-direction: column; } .rec-result-heading > button { width: 100%; } }