.staff-create { margin: 20px 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #f7f9f5; }
.staff-create form { display: flex; align-items: flex-start; gap: 18px; }
.staff-create .field { flex: 1; margin: 0; }
.staff-create form > button { margin-top: 25px; }
.staff-account { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; border-top: 1px solid var(--line); }
.staff-account p { font-size: 12px; margin: 5px 0; overflow-wrap: anywhere; }
.staff-controls { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; max-width: 310px; }
.staff-activity { margin-top: 24px; }
.staff-activity summary { font-weight: 650; cursor: pointer; padding: 12px 0; }
.staff-event { display: grid; gap: 5px; font-size: 13px; padding: 14px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.staff-event small { color: var(--muted); }
.personal-login-note { padding: 12px 14px; background: #eff6f2; border-radius: 10px; font-size: 12px; line-height: 1.6; }
.demo-login table { font-size: 11px; border-collapse: collapse; width: 100%; margin: 12px 0; }
.demo-login td, .demo-login th { text-align: left; padding: 5px; border-bottom: 1px solid var(--line); }
@media(max-width:600px) { .staff-create { padding: 15px; } .staff-create form, .staff-account { flex-direction: column; } .staff-create .field, .staff-create button { width: 100%; } .staff-create form > button { margin-top: 0; } .staff-controls { max-width: none; } .staff-controls button { flex: 1 1 160px; } }