.punch-body {
  background: #f0f3f6;
  min-height: 100vh;
}
.punch-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: #fff;
  border-bottom: 1px solid #e3e6ea;
}
.punch-title {
  margin: 0; font-size: 22px; font-weight: 700;
}
.punch-date {
  font-size: 13px; color: #666; margin-top: 4px;
}
.punch-clock {
  font-size: 38px; font-weight: 700; font-family: ui-monospace, "SF Mono", Consolas, monospace;
  color: #1f4f5b;
  letter-spacing: 2px;
}
.punch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding: 20px;
}
.staff-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e3e6ea;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.staff-card.status-working {
  border-color: #1e7a3a;
  background: #f3faf5;
}
.staff-card.status-break {
  border-color: #c97b00;
  background: #fff8ec;
}
.staff-card.status-done {
  border-color: #888;
  background: #f4f4f4;
  opacity: 0.85;
}
.staff-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.staff-card-name {
  font-size: 18px; font-weight: 700;
}
.status-badge {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px;
  background: #e9ecef; color: #555;
}
.status-badge.working { background: #d6ecdd; color: #1e7a3a; }
.status-badge.break { background: #fdecd0; color: #a05c00; }
.status-badge.done { background: #e0e0e0; color: #555; }
.punch-times {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 10px;
  font-size: 12.5px;
}
.punch-times .lbl { color: #777; }
.punch-times .tm { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }
.punch-times .tm.empty { color: #ccc; }
.break-list {
  background: #f7f9fb;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12.5px;
}
.break-line {
  display: flex; gap: 6px; align-items: center;
  padding: 2px 0;
}
.break-line .lbl { color: #777; min-width: 48px; }
.break-line .tm { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }
.break-line .tm.empty { color: #ccc; }
.break-empty { color: #aaa; font-size: 12px; text-align: center; padding: 2px 0; }
.staff-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.staff-buttons .btn { padding: 10px; justify-content: center; font-size: 13px; }
.btn-clockin { background: #1e7a3a; color: #fff; border-color: #1e7a3a; }
.btn-clockin:hover { background: #185f2d; }
.btn-clockin:disabled { background: #c8d3c9; border-color: #c8d3c9; color: #fff; cursor: not-allowed; }
.btn-breakstart { background: #c97b00; color: #fff; border-color: #c97b00; }
.btn-breakstart:hover { background: #a86700; }
.btn-breakstart:disabled { background: #e0d3b8; border-color: #e0d3b8; color: #fff; cursor: not-allowed; }
.btn-breakend { background: #4a86b3; color: #fff; border-color: #4a86b3; }
.btn-breakend:hover { background: #386690; }
.btn-breakend:disabled { background: #cdd9e3; border-color: #cdd9e3; color: #fff; cursor: not-allowed; }
.btn-clockout { background: #b3261e; color: #fff; border-color: #b3261e; }
.btn-clockout:hover { background: #911e18; }
.btn-clockout:disabled { background: #e6c7c5; border-color: #e6c7c5; color: #fff; cursor: not-allowed; }
.punch-foot {
  padding: 12px 24px;
  text-align: center;
  color: #666;
  font-size: 13px;
}