:root {
  color: #172033;
  background: #f4f7fb;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #f4f7fb; }
button, input, select, textarea { font: inherit; }
.staff-app { width: min(100%, 620px); margin: 0 auto; padding: 20px 14px 48px; }
.staff-header { padding: 10px 4px 16px; }
.staff-header h1 { margin: 2px 0 6px; font-size: 25px; }
.staff-header p { margin: 0; color: #56627a; }
.staff-eyebrow { color: #245db5 !important; font-weight: 800; font-size: 13px; letter-spacing: .08em; }
.staff-card { margin: 0 0 14px; padding: 18px; border: 1px solid #dce3ef; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(27, 45, 78, .06); }
.staff-card h2 { margin: 0 0 14px; font-size: 18px; }
.staff-grid { display: grid; gap: 13px; }
label { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
input, select, textarea { width: 100%; min-height: 48px; border: 1px solid #bac5d7; border-radius: 10px; padding: 10px 12px; background: #fff; color: #172033; }
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(37, 99, 235, .18); border-color: #2563eb; }
.staff-help { margin: -6px 0 12px; color: #68748a; font-size: 13px; }
.denomination-rows { display: grid; gap: 9px; }
.denomination-row { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 12px; }
.denomination-row span { font-weight: 800; }
.denomination-row input { text-align: right; }
.staff-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 2px solid #dce3ef; }
.staff-total strong { font-size: 24px; color: #153f86; }
.staff-status { min-height: 52px; margin: 4px 0 12px; padding: 12px 14px; border-radius: 12px; background: #eaf1fc; color: #173d79; font-weight: 700; white-space: pre-line; }
.staff-status:empty { visibility: hidden; }
.staff-status[data-kind="error"] { background: #fff0f0; color: #9f2323; }
.staff-status[data-kind="success"] { background: #eaf8ef; color: #176b35; }
.staff-submit { width: 100%; min-height: 54px; border: 0; border-radius: 13px; background: #1556b6; color: #fff; font-weight: 800; font-size: 17px; }
.staff-submit:disabled { opacity: .55; }
@media (min-width: 560px) {
  .staff-grid { grid-template-columns: 1fr 1fr; }
  .staff-grid h2 { grid-column: 1 / -1; }
}
