.payroll-panel p { color: var(--muted); line-height: 1.7; }
.payroll-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 20px 0; }
.payroll-controls .field { min-width: 160px; }
.payroll-controls input { min-height: 42px; }
.payroll-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.payroll-summary > div { border-radius: 16px; padding: 20px; background: #eff6f2; }
.payroll-summary strong { display: block; margin-top: 10px; font-size: 22px; }
.payroll-scroll { overflow-x: auto; margin-top: 18px; }
.payroll-scroll table { width: 100%; min-width: 1020px; }
.payroll-scroll small,.payroll-dialog small { display: block; color: var(--muted); margin-top: 6px; }
.payroll-scroll th,.payroll-scroll td { padding: 15px 12px; text-align: left; }
.payroll-scroll button { white-space: nowrap; }
.payroll-dialog { width: min(720px,94vw); max-height: 90vh; overflow-y: auto; border: 0; border-radius: 20px; padding: 28px; color: var(--ink); }
.payroll-dialog::backdrop { background: #102f3b88; }
.payroll-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.payroll-dialog [role=alert] { color: #b33827; }
.payroll-dialog section { padding: 14px 0; border-bottom: 1px solid #d9e5df; }
@media(max-width:760px) { .payroll-summary { grid-template-columns: 1fr 1fr; } .payroll-fields { grid-template-columns: 1fr; } .payroll-controls .field { width: 100%; } .payroll-dialog { padding: 20px; } }