:root {
  --ink: #111111;
  --muted: #676767;
  --line: #dedede;
  --soft: #f5f5f5;
  --red: #d81920;
  --red-dark: #971116;
  --white: #ffffff;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--soft);
  font-family: Tahoma, Arial, sans-serif;
  line-height: 1.5;
}

button, input, select { font: inherit; }
.masthead, main, footer, .warning { max-width: 1180px; margin-inline: auto; }
.masthead {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: flex-end;
  padding: 46px 24px 24px;
  background: var(--white);
  border-top: 8px solid var(--red);
}
.eyebrow, .step { margin: 0 0 6px; color: var(--red); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 0.98; letter-spacing: -0.055em; }
h2 { margin-bottom: 0; font-size: 1.45rem; }
.subtitle { margin: 0; color: var(--muted); }
.draft-stamp { padding: 10px 14px; color: var(--white); background: var(--ink); font-weight: 800; white-space: nowrap; }
.warning {
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 16px 20px;
  color: var(--red-dark);
  background: #fff2f2;
  border-left: 6px solid var(--red);
  font-weight: 700;
}
main { display: grid; gap: 18px; padding: 0 24px 40px; }
.panel { padding: 24px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 10px 35px rgb(0 0 0 / 5%); }
.section-heading, .export-panel { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.field-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 22px 0; }
.field-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 4px; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 0.86rem; font-weight: 700; }
input, select { width: 100%; min-height: 44px; padding: 9px 11px; color: var(--ink); background: var(--white); border: 1px solid #bdbdbd; }
input:focus, select:focus, button:focus { outline: 3px solid rgb(216 25 32 / 22%); outline-offset: 2px; }
button { min-height: 42px; padding: 10px 16px; border: 0; cursor: pointer; font-weight: 800; }
.primary { color: var(--white); background: var(--red); }
.primary:hover { background: var(--red-dark); }
.secondary { color: var(--ink); background: var(--white); border: 1px solid var(--ink); }
.align-end { align-self: end; }
.add-employee { margin: 0 0 20px; padding: 14px; background: var(--soft); border: 1px solid var(--line); }
.add-employee summary { cursor: pointer; font-weight: 800; }
.status { padding: 6px 10px; color: var(--muted); background: var(--soft); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; }
.status.draft { color: #0b5631; background: #e4f6ec; }
.status.blocked { color: var(--red-dark); background: #fff0f0; }
.empty-state { margin-top: 20px; padding: 46px 20px; color: var(--muted); background: var(--soft); text-align: center; }
.payslip-title { display: flex; justify-content: space-between; gap: 24px; margin-top: 20px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); }
.payslip-title div { display: grid; }
.payslip-title span { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; }
.payslip-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.payslip-grid div { padding: 18px; border-bottom: 1px solid var(--line); }
.payslip-grid dt { color: var(--muted); font-size: 0.78rem; }
.payslip-grid dd { margin: 4px 0 0; font-size: 1.25rem; font-weight: 800; }
.payslip-grid .net { grid-column: 1 / -1; display: flex; justify-content: space-between; color: var(--white); background: var(--ink); }
.preview-note { margin: 14px 0 0; color: var(--muted); font-size: 0.8rem; }
.exception-card { margin-top: 20px; padding: 18px; color: var(--red-dark); background: #fff1f1; border: 1px solid #efb8ba; }
.exception-card li + li { margin-top: 8px; }
.button-row { display: flex; gap: 10px; flex-wrap: wrap; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 22px 24px 44px; color: var(--muted); font-size: 0.78rem; }

@media (max-width: 860px) {
  .field-grid, .field-grid.compact, .payslip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .masthead, .section-heading, .export-panel { align-items: stretch; flex-direction: column; }
}

@media (max-width: 520px) {
  .field-grid, .field-grid.compact, .payslip-grid { grid-template-columns: 1fr; }
  .payslip-title, footer { flex-direction: column; }
}

@media print {
  body { background: var(--white); }
  .controls, .export-panel, button, details { display: none !important; }
  .masthead, main, footer, .warning { max-width: none; }
  .panel { box-shadow: none; }
  .warning, footer, .draft-stamp, .preview-note { display: block !important; }
}
